Module  javafx.controls

Package javafx.scene.chart

JavaFX用户界面提供了一组图表组件，这是一种非常方便的数据可视化方式。 应用程序开发人员可以利用JavaFX运行时提供的这些脱机图形图表来显示各种各样的数据。

常见合类型的图表如Bar ， Line ， Area ， Pie ， Scatter和Bubble个设置图表。 这些图表很容易创建，可定制。 JavaFX图表API是以视觉为中心的API，而不是以模型为中心。

JavaFX图表支持图表组件的动画以及图表轴的自动测距。 此外，与其他JavaFX UI控件一样，图表可视化组件可以通过CSS进行风格化。 因此，有几种公共的视觉属性可以通过CSS风格。 稍后在文档中提供一个示例。

以下是列出现有图表类型的表格及其预期用途的简要摘要。

Table of Chart Types

Chart

Summary

LineChart

Plots line between the data points in a series. Used usually to view data trends over time.

AreaChart

Plots the area between the line that connects the data points and the axis. Good for comparing cumulated totals over time.

BarChart

Plots rectangular bars with heights indicating data values they represent, and corresponding to the categories they belongs to. Used for displaying discontinuous / discrete data

PieChart

Plots circular chart divided into segments with each segment representing a value as a proportion of the total. It looks like a Pie and hence the name

BubbleChart

Plots bubbles for data points in a series. Each plotted entity depicts three parameters in a 2D chart and hence a unique chart type.

ScatterChart

Plots symbols for the data points in a series. This type of chart is useful in viewing distribution of data and its corelation, if there is any clustering.

Chart是所有图表的基础。 它负责绘制背景，框架，标题和图例。 它可以扩展到创建自定义图表类型。 XYChart是所有两个轴图的基础类，它从Chart类扩展。 它主要负责绘制图表的两个轴和背景。 大多数图表从XYChart类展开，除了从Chart类扩展的PieChart，它不是双轴图。

javafx.scene.chart软件包包括在创建两个轴图时可以使用的轴类 。 Axis是所有图表轴的抽象基类。 CategoryAxis绘制字符串类别，其中每个值是沿轴的唯一类别。 NumberAxis绘制每个tickUnit的主要刻度线的数字范围。

例如BarChart绘制XYChart.Series对象序列中的数据。 每个系列包含XYChart.Data个对象。 

   // add data XYChart.Series<String,Number> series1 = new XYChart.Series<String,Number>(); series1.setName("Data Series 1"); series1.getData().add(new XYChart.Data<String,Number>("2007", 567));

我们可以同样定义更多的系列对象。 以下代码片段显示如何创建具有3个类别及其X和Y轴的BarChart： 

   static String[] years = {"2007", "2008", "2009"}; final CategoryAxis xAxis = new CategoryAxis(); final NumberAxis yAxis = new NumberAxis(); final BarChart<String,Number> bc = new BarChart<String,Number>(xAxis, yAxis); xAxis.setCategories(FXCollections.<String>observableArrayList(Arrays.asList(years))); bc.getData().addAll(series1, series2, series3);

JavaFX图表适用于实时数据集中的实时或动态图表（如在线股票，网络流量等）。 以下是使用模拟数据创建的动态图表的示例。 A Timeline用于模拟随时间（小时）的股价变动的动态数据。 

   private XYChart.Series<Number,Number> hourDataSeries; private NumberAxis xAxis; private Timeline animation; private double hours = 0; private double timeInHours = 0; private double prevY = 10; private double y = 10; // timeline to add new data every 60th of a second animation = new Timeline(); animation.getKeyFrames().add(new KeyFrame(Duration.millis(1000 / 60), new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent actionEvent) { // 6 minutes data per frame for(int count = 0; count < 6; count++) { nextTime(); plotTime(); } } })); animation.setCycleCount(Animation.INDEFINITE); xAxis = new NumberAxis(0, 24, 3); final NumberAxis yAxis = new NumberAxis(0, 100, 10); final LineChart<Number,Number> lc = new LineChart<Number,Number>(xAxis, yAxis); lc.setCreateSymbols(false); lc.setAnimated(false); lc.setLegendVisible(false); lc.setTitle("ACME Company Stock"); xAxis.setLabel("Time"); xAxis.setForceZeroInRange(false); yAxis.setLabel("Share Price"); yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis, "$", null)); hourDataSeries = new XYChart.Series<Number,Number>(); hourDataSeries.setName("Hourly Data"); hourDataSeries.getData().add(new XYChart.Data<Number,Number>(timeInHours, prevY)); lc.getData().add(hourDataSeries); private void nextTime() { if (minutes == 59) { hours++; minutes = 0; } else { minutes++; } timeInHours = hours + ((1d/60d) * minutes); } private void plotTime() { if ((timeInHours % 1) == 0) { // change of hour double oldY = y; y = prevY - 10 + (Math.random() * 20); prevY = oldY; while (y < 10 || y > 90) y = y - 10 + (Math.random() * 20); hourDataSeries.getData().add(new XYChart.Data<Number, Number>(timeInHours, prevY)); // after 25hours delete old data if (timeInHours > 25) hourDataSeries.getData().remove(0); // every hour after 24 move range 1 hour if (timeInHours > 24) { xAxis.setLowerBound(xAxis.getLowerBound() + 1); xAxis.setUpperBound(xAxis.getUpperBound() + 1); } } }

start方法需要调用动画，.play（）来启动模拟动态图。

请参阅关于CSS样式的javafx.scene.control包文档。 通过CSS样式化图表的示例如下： - 将图表内容背景设置为某种颜色：

.chart-content {-fx-background-color：cyan;}

线条线颜色可以设置如下： -

.chart-series-line {-fx-stroke：green; -fx-stroke-width：4px;}