3

我正在创建一个极坐标图（星图），并希望在 JavaFX 中进行。我见过一些具有这种能力的商业公司，但是，我希望有一个本地库，我们可以在以后根据需要进行修改。我研究了文档和库以找到创建极坐标图的方法。我没有运气。你能指出我正确的方向吗？我查看了 CategoryAxis、NumberAxis、ValueAxis、ScatterChart、PieChart、LineChart 无济于事。它主要是我正在查看并遇到问题的圆形网格，甚至不是绘制的数据。我使用过 Arc 和 Canvas，以及带有 Arc 的 Scenegraph。我真的很想使用图表功能，例如绘制数据并将该数据链接到极坐标图上的表格。我最初的想法是使用 XY 图表，其中半径为一个轴，轴指向的角度。任何帮助将不胜感激。

4

2 回答 2

2

在 JavaFX 中本地实现 PolarChart

我认为您需要直接将Chart子类化（以创建新的图表类型 - PolarChart），而不是使用XYChart。

您可以从XYChart 实现（甚至在创建新的 PolarChart 时甚至可能是 PieChart实现）大量借鉴。JavaFX 中有 PolarCharts 的现有 Java 代码，您可以帮助其中一些（尽管它使用不同的框架和渲染技术）在创建 PolarChart 时可能会提供一些灵感，例如：DefaultPolarItemRender.java和PolarPlot.java。

我的猜测是，实施将具有挑战性并且需要大量工作。

关于使用替代技术

或者，您可以使用 Java 8 并使用SwingNode在 JavaFX 应用程序中嵌入 JFreeChart 极坐标图，或者通过将 JavaScript 呈现的图表嵌入到WebView中来使用许多优秀的基于 JavaScript 的绘图库之一（例如HighCharts ） 。

于 2013-10-16T20:44:34.017 回答
-2

您可能希望重用一些已经存在的 JavaScript 库，而不是在 JavaFx 中重写极坐标图的逻辑。我为使用 JavaFx 中著名的 JavaScript 库 d3.js 编写了一个包装器：

https://github.com/stefanidelloth/javafx-d3

它允许您利用 d3 的强大功能在 JavaFx 中创建漂亮的图形和绘图。这是 d3.js 极坐标图的示例：

http://bl.ocks.org/mbostock/4583749

var data = d3.range(0, 2 * Math.PI, .01).map(function(t) {
  return [t, Math.sin(2 * t) * Math.cos(2 * t)];
});

var width = 960,
    height = 500,
    radius = Math.min(width, height) / 2 - 30;

var r = d3.scale.linear()
    .domain([0, .5])
    .range([0, radius]);

var line = d3.svg.line.radial()
    .radius(function(d) { return r(d[1]); })
    .angle(function(d) { return -d[0] + Math.PI / 2; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gr = svg.append("g")
    .attr("class", "r axis")
  .selectAll("g")
    .data(r.ticks(5).slice(1))
  .enter().append("g");

gr.append("circle")
    .attr("r", r);

gr.append("text")
    .attr("y", function(d) { return -r(d) - 4; })
    .attr("transform", "rotate(15)")
    .style("text-anchor", "middle")
    .text(function(d) { return d; });

var ga = svg.append("g")
    .attr("class", "a axis")
  .selectAll("g")
    .data(d3.range(0, 360, 30))
  .enter().append("g")
    .attr("transform", function(d) { return "rotate(" + -d + ")"; });

ga.append("line")
    .attr("x2", radius);

ga.append("text")
    .attr("x", radius + 6)
    .attr("dy", ".35em")
    .style("text-anchor", function(d) { return d < 270 && d > 90 ? "end" : null; })
    .attr("transform", function(d) { return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null; })
    .text(function(d) { return d + "°"; });

svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line);

您可以应用 javafx-d3 的策略来包含您想要的任何 JavaScript 库。以下极性印迹库构建在 d3.js 之上，可能会提供一些更专业的功能：

https://github.com/biovisualize/micropolar

于 2016-05-01T14:30:43.117 回答