原文： http://zetcode.com/gui/javafx/charts/

在 JavaFX 教程的这一部分中，我们将使用图表。 在 JavaFX 中，只需添加几行代码即可构建图表。

在以下示例中，我们创建一个折线图，一个面积图，一个散点图，一个条形图和一个饼图。

折线图

折线图是一种基本类型的图表，它将信息显示为由直线段连接的一系列数据点。 JavaFX 中的折线图是使用javafx.scene.chart.LineChart创建的。

LineChartEx.java

  1. package com.zetcode;
  3. import javafx.application.Application;
  4. import javafx.scene.Scene;
  5. import javafx.scene.chart.LineChart;
  6. import javafx.scene.chart.NumberAxis;
  7. import javafx.scene.chart.XYChart;
  8. import javafx.scene.layout.HBox;
  9. import javafx.stage.Stage;
  11. /*
  12.  * ZetCode JavaFX tutorial
  13.  *
  14.  * This program creates a line chart.
  15.  *
  16.  * Author: Jan Bodnar 
  17.  * Website: zetcode.com 
  18.  * Last modified: August 2016
  19.  */
  21. public class LineChartEx extends Application {
  23.     @Override
  24.     public void start(Stage stage) {
  26.         initUI(stage);
  27.     }
  29.     private void initUI(Stage stage) {
  31.         HBox root = new HBox();
  33.         Scene scene = new Scene(root, 450, 330);
  35.         NumberAxis xAxis = new NumberAxis();
  36.         xAxis.setLabel("Age");
  38.         NumberAxis yAxis = new NumberAxis();
  39.         yAxis.setLabel("Salary (€)");
  41.         LineChart lineChart = new LineChart(xAxis, yAxis);
  42.         lineChart.setTitle("Average salary per age");
  44.         XYChart.Series data = new XYChart.Series();
  45.         data.setName("2016");
  47.         data.getData().add(new XYChart.Data(18, 567));
  48.         data.getData().add(new XYChart.Data(20, 612));
  49.         data.getData().add(new XYChart.Data(25, 800));
  50.         data.getData().add(new XYChart.Data(30, 980));
  51.         data.getData().add(new XYChart.Data(40, 1410));
  52.         data.getData().add(new XYChart.Data(50, 2350));
  54.         lineChart.getData().add(data);
  56.         root.getChildren().add(lineChart);
  58.         stage.setTitle("LineChart");
  59.         stage.setScene(scene);
  60.         stage.show();
  61.     }
  63.     public static void main(String[] args) {
  64.         launch(args);
  65.     }
  66. }

在示例中，我们有一个折线图，显示每个年龄段的平均工资。

  1. NumberAxis xAxis = new NumberAxis();
  2. xAxis.setLabel("Age");
  4. NumberAxis yAxis = new NumberAxis();
  5. yAxis.setLabel("Salary (€)");

用NumberAxis创建两个轴。 setLabel()方法设置轴的描述。

  1. LineChart lineChart = new LineChart(xAxis, yAxis);
  2. lineChart.setTitle("Average salary per age");

LineChart创建折线图。 setTitle()方法为图表设置标题。

  1. XYChart.Series data = new XYChart.Series();
  2. data.setName("2016");

XYChart.Series为图表提供数据系列。 数据系列是数据点的列表。 每个数据点包含一个 x 值和一个 y 值。 setName()方法为系列命名。 （一个图表中可能有多个系列。）

  1. data.getData().add(new XYChart.Data(18, 567));
  2. data.getData().add(new XYChart.Data(20, 612));
  3. data.getData().add(new XYChart.Data(25, 800));
  4. data.getData().add(new XYChart.Data(30, 980));
  5. data.getData().add(new XYChart.Data(40, 1410));
  6. data.getData().add(new XYChart.Data(50, 2350));

我们将数据添加到数据系列中。 XYChart.Data是一个单独的数据项，其中包含 2 个轴图的数据。

  1. lineChart.getData().add(data);

数据被插入到图表中。

JavaFX 图表 - 图1

图：LineChart

区域图

区域图以图形方式显示随时间变化的定量数据。

AreaChart.java

  1. package com.zetcode;
  3. import javafx.application.Application;
  4. import javafx.scene.Scene;
  5. import javafx.scene.chart.AreaChart;
  6. import javafx.scene.chart.CategoryAxis;
  7. import javafx.scene.chart.NumberAxis;
  8. import javafx.scene.chart.XYChart;
  9. import javafx.scene.layout.HBox;
  10. import javafx.stage.Stage;
  12. /*
  13.  * ZetCode JavaFX tutorial
  14.  *
  15.  * This program creates an area chart.
  16.  *
  17.  * Author: Jan Bodnar 
  18.  * Website: zetcode.com 
  19.  * Last modified: August 2016
  20.  */
  21. public class AreaChartEx extends Application {
  23.     @Override
  24.     public void start(Stage stage) {
  26.         initUI(stage);
  27.     }
  29.     private void initUI(Stage stage) {
  31.         HBox root = new HBox();
  33.         Scene scene = new Scene(root, 490, 350);
  35.         CategoryAxis xAxis = new CategoryAxis();
  36.         xAxis.setLabel("Time");
  38.         NumberAxis yAxis = new NumberAxis();
  39.         yAxis.setLabel("Thousand bbl/d");
  41.         AreaChart areaChart = new AreaChart(xAxis, yAxis);
  42.         areaChart.setTitle("Oil consumption");
  44.         XYChart.Series data = new XYChart.Series();
  46.         data.getData().add(new XYChart.Data("2004", 82502));
  47.         data.getData().add(new XYChart.Data("2005", 84026));
  48.         data.getData().add(new XYChart.Data("2006", 85007));
  49.         data.getData().add(new XYChart.Data("2007", 86216));
  50.         data.getData().add(new XYChart.Data("2008", 85559));
  51.         data.getData().add(new XYChart.Data("2009", 84491));
  52.         data.getData().add(new XYChart.Data("2010", 87672));
  53.         data.getData().add(new XYChart.Data("2011", 88575));
  54.         data.getData().add(new XYChart.Data("2012", 89837));
  55.         data.getData().add(new XYChart.Data("2013", 90701));
  57.         areaChart.getData().add(data);
  58.         areaChart.setLegendVisible(false);
  60.         root.getChildren().add(areaChart);
  62.         stage.setTitle("AreaChart");
  63.         stage.setScene(scene);
  64.         stage.show();
  65.     }
  67.     public static void main(String[] args) {
  68.         launch(args);
  69.     }
  70. }

该示例显示了一个区域图，该区域图按年份显示了世界原油消耗量。

  1. AreaChart areaChart = new AreaChart(xAxis, yAxis);
  2. areaChart.setTitle("Oil consumption");

使用AreaChart创建面积图。

  1. CategoryAxis xAxis = new CategoryAxis();
  2. xAxis.setLabel("Time");

CategoryAxis适用于字符串类别。 我们在此轴上显示年份字符串。

JavaFX 图表 - 图2

图：AreaChart

散点图

散点图是在水平和垂直轴上绘制的一组点。

ScatterChartEx.java

  1. package com.zetcode;
  3. import javafx.application.Application;
  4. import javafx.scene.Scene;
  5. import javafx.scene.chart.CategoryAxis;
  6. import javafx.scene.chart.NumberAxis;
  7. import javafx.scene.chart.ScatterChart;
  8. import javafx.scene.chart.XYChart;
  9. import javafx.scene.layout.HBox;
  10. import javafx.stage.Stage;
  12. /*
  13.  * ZetCode JavaFX tutorial
  14.  *
  15.  * This program creates a scatter chart.
  16.  *
  17.  * Author: Jan Bodnar 
  18.  * Website: zetcode.com 
  19.  * Last modified: August 2016
  20.  */
  21. public class ScatterChartEx extends Application {
  23.     @Override
  24.     public void start(Stage stage) {
  26.         initUI(stage);
  27.     }
  29.     private void initUI(Stage stage) {
  31.         HBox root = new HBox();
  33.         CategoryAxis xAxis = new CategoryAxis();
  35.         NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2);
  37.         ScatterChart scatterChart = new ScatterChart(xAxis, yAxis);
  39.         XYChart.Series data = new XYChart.Series();
  41.         data.getData().add(new XYChart.Data("Mar 14", 43));
  42.         data.getData().add(new XYChart.Data("Nov 14", 38.5));
  43.         data.getData().add(new XYChart.Data("Jan 15", 41.8));
  44.         data.getData().add(new XYChart.Data("Mar 15", 37));
  45.         data.getData().add(new XYChart.Data("Dec 15", 33.7));
  46.         data.getData().add(new XYChart.Data("Feb 16", 39.8));
  48.         scatterChart.getData().add(data);
  49.         scatterChart.setLegendVisible(false);
  51.         Scene scene = new Scene(root, 450, 330);
  53.         root.getChildren().add(scatterChart);
  55.         stage.setTitle("Gold price");
  56.         stage.setScene(scene);
  57.         stage.show();
  58.     }
  60.     public static void main(String[] args) {
  61.         launch(args);
  62.     }
  63. }

在示例中，我们使用ScatterChart显示黄金价格。

  1. CategoryAxis xAxis = new CategoryAxis();

x 轴是用于显示日期的CategoryAxis。

  1. NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2);

y 轴是用于显示黄金价格的NumberAxis。 构造器的参数为：轴标签，下限，上限和刻度单位。

  1. XYChart.Series data = new XYChart.Series();
  3. data.getData().add(new XYChart.Data("Mar 14", 43));
  4. ...

使用XYChart.Series创建一系列数据，并使用XYChart.Data创建其数据项。

JavaFX 图表 - 图3

图：ScatterChart

条形图

条形图显示带有矩形条的分组数据，其长度与它们所代表的值成比例。 条形图可以垂直或水平绘制。

BarChartEx.java

  1. package com.zetcode;
  3. import javafx.application.Application;
  4. import javafx.scene.Scene;
  5. import javafx.scene.chart.BarChart;
  6. import javafx.scene.chart.CategoryAxis;
  7. import javafx.scene.chart.NumberAxis;
  8. import javafx.scene.chart.XYChart;
  9. import javafx.scene.layout.HBox;
  10. import javafx.stage.Stage;
  12. /*
  13.  * ZetCode JavaFX tutorial
  14.  *
  15.  * This program creates a bar chart.
  16.  *
  17.  * Author: Jan Bodnar 
  18.  * Website: zetcode.com 
  19.  * Last modified: August 2016
  20.  */
  21. public class BarChartEx extends Application {
  23.     @Override
  24.     public void start(Stage stage) {
  26.         initUI(stage);
  27.     }
  29.     private void initUI(Stage stage) {
  31.         HBox root = new HBox();  
  33.         Scene scene = new Scene(root, 480, 330);
  34.         CategoryAxis xAxis = new CategoryAxis();
  36.         NumberAxis yAxis = new NumberAxis();
  37.         yAxis.setLabel("Gold medals");
  39.         BarChart barChart = new BarChart(xAxis, yAxis);
  40.         barChart.setTitle("Olympic gold medals in London");
  42.         XYChart.Series data = new XYChart.Series();
  44.         data.getData().add(new XYChart.Data("USA", 46));
  45.         data.getData().add(new XYChart.Data("China", 38));
  46.         data.getData().add(new XYChart.Data("UK", 29));
  47.         data.getData().add(new XYChart.Data("Russia", 22));
  48.         data.getData().add(new XYChart.Data("South Korea", 13));
  49.         data.getData().add(new XYChart.Data("Germany", 11));
  51.         barChart.getData().add(data);
  52.         barChart.setLegendVisible(false);
  54.         root.getChildren().add(barChart);
  56.         stage.setTitle("BarChart");
  57.         stage.setScene(scene);
  58.         stage.show();
  60.     }
  62.     public static void main(String[] args) {
  63.         launch(args);
  64.     }
  65. }

在示例中，我们使用条形图显示了 2012 年伦敦奥运会每个国家/地区的奥运金牌数量。

  1. BarChart barChart = new BarChart(xAxis, yAxis);

使用BarChart创建条形图。

JavaFX 图表 - 图4

图：AreaChart

饼形图

饼图是一种圆图，分为多个切片以说明数值比例。

PieChartEx.java

  1. package com.zetcode;
  3. import javafx.application.Application;
  4. import javafx.collections.FXCollections;
  5. import javafx.collections.ObservableList;
  6. import javafx.scene.Scene;
  7. import javafx.scene.chart.PieChart;
  8. import javafx.scene.layout.HBox;
  9. import javafx.stage.Stage;
  11. /*
  12.  * ZetCode JavaFX tutorial
  13.  *
  14.  * This program creates a pie chart.
  15.  *
  16.  * Author: Jan Bodnar 
  17.  * Website: zetcode.com 
  18.  * Last modified: August 2016
  19.  */
  20. public class PieChartEx extends Application {
  22.     @Override
  23.     public void start(Stage stage) {
  25.         initUI(stage);
  26.     }
  28.     private void initUI(Stage stage) {
  30.         HBox root = new HBox();
  32.         Scene scene = new Scene(root, 450, 330);
  34.         ObservableList<PieChart.Data> pieChartData
  35.                 = FXCollections.observableArrayList(
  36.                         new PieChart.Data("Apache", 52),
  37.                         new PieChart.Data("Nginx", 31),
  38.                         new PieChart.Data("IIS", 12),
  39.                         new PieChart.Data("LiteSpeed", 2),
  40.                         new PieChart.Data("Google server", 1),
  41.                         new PieChart.Data("Others", 2));
  43.         PieChart pieChart = new PieChart(pieChartData);
  44.         pieChart.setTitle("Web servers market share (2016)");
  46.         root.getChildren().add(pieChart);        
  48.         stage.setTitle("PieChart");
  49.         stage.setScene(scene);
  50.         stage.show();
  51.     }
  53.     public static void main(String[] args) {
  54.         launch(args);
  55.     }
  56. }

该示例使用饼图来显示 Web 服务器的市场份额。

  1. ObservableList<PieChart.Data> pieChartData
  2.         = FXCollections.observableArrayList(
  3.                 new PieChart.Data("Apache", 52),
  4.                 new PieChart.Data("Nginx", 31),
  5.                 new PieChart.Data("IIS", 12),
  6.                 new PieChart.Data("LiteSpeed", 2),
  7.                 new PieChart.Data("Google server", 1),
  8.                 new PieChart.Data("Others", 2));

饼图数据项是使用PieChart.Data创建的。

  1. PieChart pieChart = new PieChart(pieChartData);

使用PieChart类创建一个饼图。

JavaFX 图表 - 图5

图：PieChart

在本章中，我们在 JavaFX 中创建了LineChart，AreaChart，ScatterChart，BarChart和PieChart。 JFreechart 教程显示了如何在流行的 JFreechart 库中创建图表。