JavaFX 圖表 · ZetCode 中文系列教程

# JavaFX 圖表 > 原文： [http://zetcode.com/gui/javafx/charts/](http://zetcode.com/gui/javafx/charts/) 在 JavaFX 教程的這一部分中，我們將使用圖表。在 JavaFX 中，只需添加幾行代碼即可構建圖表。在以下示例中，我們創建一個折線圖，一個面積圖，一個散點圖，一個條形圖和一個餅圖。 ## 折線圖折線圖是一種基本類型的圖表，它將信息顯示為由直線段連接的一系列數據點。 JavaFX 中的折線圖是使用`javafx.scene.chart.LineChart`創建的。 `LineChartEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.LineChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.scene.layout.HBox; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program creates a line chart. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class LineChartEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); Scene scene = new Scene(root, 450, 330); NumberAxis xAxis = new NumberAxis(); xAxis.setLabel("Age"); NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("Salary (€)"); LineChart lineChart = new LineChart(xAxis, yAxis); lineChart.setTitle("Average salary per age"); XYChart.Series data = new XYChart.Series(); data.setName("2016"); data.getData().add(new XYChart.Data(18, 567)); data.getData().add(new XYChart.Data(20, 612)); data.getData().add(new XYChart.Data(25, 800)); data.getData().add(new XYChart.Data(30, 980)); data.getData().add(new XYChart.Data(40, 1410)); data.getData().add(new XYChart.Data(50, 2350)); lineChart.getData().add(data); root.getChildren().add(lineChart); stage.setTitle("LineChart"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們有一個折線圖，顯示每個年齡段的平均工資。 ```java NumberAxis xAxis = new NumberAxis(); xAxis.setLabel("Age"); NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("Salary (€)"); ``` 用`NumberAxis`創建兩個軸。 `setLabel()`方法設置軸的描述。 ```java LineChart lineChart = new LineChart(xAxis, yAxis); lineChart.setTitle("Average salary per age"); ``` `LineChart`創建折線圖。 `setTitle()`方法為圖表設置標題。 ```java XYChart.Series data = new XYChart.Series(); data.setName("2016"); ``` `XYChart.Series`為圖表提供數據系列。數據系列是數據點的列表。每個數據點包含一個 x 值和一個 y 值。 `setName()`方法為系列命名。（一個圖表中可能有多個系列。） ```java data.getData().add(new XYChart.Data(18, 567)); data.getData().add(new XYChart.Data(20, 612)); data.getData().add(new XYChart.Data(25, 800)); data.getData().add(new XYChart.Data(30, 980)); data.getData().add(new XYChart.Data(40, 1410)); data.getData().add(new XYChart.Data(50, 2350)); ``` 我們將數據添加到數據系列中。 `XYChart.Data`是一個單獨的數據項，其中包含 2 個軸圖的數據。 ```java lineChart.getData().add(data); ``` 數據被插入到圖表中。 ![LineChart](https://img.kancloud.cn/60/f4/60f473ebdd4c0eeca9d7697984b56b13_452x356.jpg) 圖：`LineChart` ## 區域圖區域圖以圖形方式顯示隨時間變化的定量數據。 `AreaChart.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.AreaChart; import javafx.scene.chart.CategoryAxis; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.scene.layout.HBox; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program creates an area chart. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class AreaChartEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); Scene scene = new Scene(root, 490, 350); CategoryAxis xAxis = new CategoryAxis(); xAxis.setLabel("Time"); NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("Thousand bbl/d"); AreaChart areaChart = new AreaChart(xAxis, yAxis); areaChart.setTitle("Oil consumption"); XYChart.Series data = new XYChart.Series(); data.getData().add(new XYChart.Data("2004", 82502)); data.getData().add(new XYChart.Data("2005", 84026)); data.getData().add(new XYChart.Data("2006", 85007)); data.getData().add(new XYChart.Data("2007", 86216)); data.getData().add(new XYChart.Data("2008", 85559)); data.getData().add(new XYChart.Data("2009", 84491)); data.getData().add(new XYChart.Data("2010", 87672)); data.getData().add(new XYChart.Data("2011", 88575)); data.getData().add(new XYChart.Data("2012", 89837)); data.getData().add(new XYChart.Data("2013", 90701)); areaChart.getData().add(data); areaChart.setLegendVisible(false); root.getChildren().add(areaChart); stage.setTitle("AreaChart"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例顯示了一個區域圖，該區域圖按年份顯示了世界原油消耗量。 ```java AreaChart areaChart = new AreaChart(xAxis, yAxis); areaChart.setTitle("Oil consumption"); ``` 使用`AreaChart`創建面積圖。 ```java CategoryAxis xAxis = new CategoryAxis(); xAxis.setLabel("Time"); ``` `CategoryAxis`適用于字符串類別。我們在此軸上顯示年份字符串。 ![AreaChart](https://img.kancloud.cn/bd/19/bd197049ec55f8157774238382bf2a05_492x376.jpg) 圖：`AreaChart` ## 散點圖散點圖是在水平和垂直軸上繪制的一組點。 `ScatterChartEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.CategoryAxis; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.ScatterChart; import javafx.scene.chart.XYChart; import javafx.scene.layout.HBox; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program creates a scatter chart. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class ScatterChartEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); CategoryAxis xAxis = new CategoryAxis(); NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2); ScatterChart scatterChart = new ScatterChart(xAxis, yAxis); XYChart.Series data = new XYChart.Series(); data.getData().add(new XYChart.Data("Mar 14", 43)); data.getData().add(new XYChart.Data("Nov 14", 38.5)); data.getData().add(new XYChart.Data("Jan 15", 41.8)); data.getData().add(new XYChart.Data("Mar 15", 37)); data.getData().add(new XYChart.Data("Dec 15", 33.7)); data.getData().add(new XYChart.Data("Feb 16", 39.8)); scatterChart.getData().add(data); scatterChart.setLegendVisible(false); Scene scene = new Scene(root, 450, 330); root.getChildren().add(scatterChart); stage.setTitle("Gold price"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們使用`ScatterChart`顯示黃金價格。 ```java CategoryAxis xAxis = new CategoryAxis(); ``` x 軸是用于顯示日期的`CategoryAxis`。 ```java NumberAxis yAxis = new NumberAxis("USD/kg", 30, 50, 2); ``` y 軸是用于顯示黃金價格的`NumberAxis`。構造器的參數為??：軸標簽，下限，上限和刻度單位。 ```java XYChart.Series data = new XYChart.Series(); data.getData().add(new XYChart.Data("Mar 14", 43)); ... ``` 使用`XYChart.Series`創建一系列數據，并使用`XYChart.Data`創建其數據項。 ![ScatterChart](https://img.kancloud.cn/0b/a8/0ba8d8bd458ac7c2e90fa46723ab728e_452x356.jpg) 圖：`ScatterChart` ## 條形圖條形圖顯示帶有矩形條的分組數據，其長度與它們所代表的值成比例。條形圖可以垂直或水平繪制。 `BarChartEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.chart.BarChart; import javafx.scene.chart.CategoryAxis; import javafx.scene.chart.NumberAxis; import javafx.scene.chart.XYChart; import javafx.scene.layout.HBox; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program creates a bar chart. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class BarChartEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); Scene scene = new Scene(root, 480, 330); CategoryAxis xAxis = new CategoryAxis(); NumberAxis yAxis = new NumberAxis(); yAxis.setLabel("Gold medals"); BarChart barChart = new BarChart(xAxis, yAxis); barChart.setTitle("Olympic gold medals in London"); XYChart.Series data = new XYChart.Series(); data.getData().add(new XYChart.Data("USA", 46)); data.getData().add(new XYChart.Data("China", 38)); data.getData().add(new XYChart.Data("UK", 29)); data.getData().add(new XYChart.Data("Russia", 22)); data.getData().add(new XYChart.Data("South Korea", 13)); data.getData().add(new XYChart.Data("Germany", 11)); barChart.getData().add(data); barChart.setLegendVisible(false); root.getChildren().add(barChart); stage.setTitle("BarChart"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 在示例中，我們使用條形圖顯示了 2012 年倫敦奧運會每個國家/地區的奧運金牌數量。 ```java BarChart barChart = new BarChart(xAxis, yAxis); ``` 使用`BarChart`創建條形圖。 ![AreaChart](https://img.kancloud.cn/e0/f1/e0f181ba7edaadd8884646043b997064_482x356.jpg) 圖：`AreaChart` ## 餅形圖餅圖是一種圓圖，分為多個切片以說明數值比例。 `PieChartEx.java` ```java package com.zetcode; import javafx.application.Application; import javafx.collections.FXCollections; import javafx.collections.ObservableList; import javafx.scene.Scene; import javafx.scene.chart.PieChart; import javafx.scene.layout.HBox; import javafx.stage.Stage; /* * ZetCode JavaFX tutorial * * This program creates a pie chart. * * Author: Jan Bodnar * Website: zetcode.com * Last modified: August 2016 */ public class PieChartEx extends Application { @Override public void start(Stage stage) { initUI(stage); } private void initUI(Stage stage) { HBox root = new HBox(); Scene scene = new Scene(root, 450, 330); ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList( new PieChart.Data("Apache", 52), new PieChart.Data("Nginx", 31), new PieChart.Data("IIS", 12), new PieChart.Data("LiteSpeed", 2), new PieChart.Data("Google server", 1), new PieChart.Data("Others", 2)); PieChart pieChart = new PieChart(pieChartData); pieChart.setTitle("Web servers market share (2016)"); root.getChildren().add(pieChart); stage.setTitle("PieChart"); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } } ``` 該示例使用餅圖來顯示 Web 服務器的市場份額。 ```java ObservableList<PieChart.Data> pieChartData = FXCollections.observableArrayList( new PieChart.Data("Apache", 52), new PieChart.Data("Nginx", 31), new PieChart.Data("IIS", 12), new PieChart.Data("LiteSpeed", 2), new PieChart.Data("Google server", 1), new PieChart.Data("Others", 2)); ``` 餅圖數據項是使用`PieChart.Data`創建的。 ```java PieChart pieChart = new PieChart(pieChartData); ``` 使用`PieChart`類創建一個餅圖。 ![PieChart](https://img.kancloud.cn/75/b8/75b8787fe2173fd55efd17a83d641ace_452x356.jpg) 圖：`PieChart` 在本章中，我們在 JavaFX 中創建了`LineChart`，`AreaChart`，`ScatterChart`，`BarChart`和`PieChart`。 [JFreechart 教程](/java/jfreechart)顯示了如何在流行的 JFreechart 庫中創建圖表。