使用JavaFX图表绘制极坐标图。

Question

我正在创建一个极坐标图（星形图），希望在JavaFX中完成。我见过几家有这种能力的商业公司，然而，我想要一个自己编写的库，以后可以根据需要进行修改。我已经研究了文档和库，寻找创建极坐标图的方法，但是没有什么进展。你能指点我一下吗？我尝试使用CategoryAxis、NumberAxis、ValueAxis、ScatterChart、PieChart、LineChart等，但都没有成功。主要问题是圆形网格，而不是绘制的数据。我已经使用了Arc和Canvas，以及Arcs的场景图。我真的很想使用图表功能，例如在极坐标图上绘制数据，并将该数据链接到表格。我的初步想法是使用XY Chart，以半径为一轴，角度为轴指针处的另一轴。非常感谢您的任何帮助。

- user2886917

---

另一个问题，如果我不使用JavaFX中的图表功能，我应该使用画布来绘制极坐标图还是使用节点？这是一个客户端。 - user2886917

Answer 1

在JavaFX中原生实现极地图表

我认为你需要直接对Chart进行子类化（以创建一个新的图表类型 - 极地图表），而不是使用XYChart。

你可以在创建新的极坐标图表时大量借鉴XYChart实现（甚至可能还有PieChart实现）。JavaFX中已经存在用于极坐标图表的Java代码，尽管它使用了不同的框架和渲染技术，但一些内容可能会在创建PolarChart时提供一些灵感，例如：DefaultPolarItemRender.java和PolarPlot.java。

我的猜测是实现会很具挑战性，需要大量的工作。

关于使用备用技术：

另外，您可以使用Java 8并在JavaFX应用程序中嵌入一个JFreeChart极地图，使用SwingNode或使用许多出色的基于JavaScript的绘图库（如HighCharts），通过在WebView中嵌入JavaScript渲染的图表。

- jewelsea

---

现有的JavaFX PolarCharts中有哪些Java代码？我在研究时可能错过了这个。我已经看了JFreeChart和其他一些内容，但由于目前需要保持在Java 7，我无法将swing集成到应用程序中。 - user2886917

目前JavaFX中没有极地图表的现成代码。如果您想使用JavaFX绘制这样的图表，您需要从Chart类派生并自己编写代码。 - jewelsea

对于想在JavaFX中使用JFreeChart的任何人来说，不必使用SwingNode，因为JFreeChart内置了基于画布的ChartViewer节点。 - David Gilbert

虽然JFreeChart有ChartViewer JavaFX作为ChartPanel Swing的替代品，但似乎不支持PolarPlot的CSS样式。JFreeChart类和PolarPlot类仍然使用一些Java Swing / AWT代码。 - DJViking

Answer 2

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

https://github.com/stefaneidelloth/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

- Stefan