Javafx 简明教程

JavaFX - Area Chart

面积图用于绘制基于面积的图表。它绘制给定序列点和轴之间的面积。通常，此图表用于比较两个数量。

以下是面积图，描述了两个人一周内消耗的水果数量。

Area Chart in JavaFX

在 JavaFX 中，区域图由一个名为 AreaChart 的类表示。该类属于 javafx.scene.chart 包。通过实例化此类，可以在 JavaFX 中创建一个 AreaChart 节点。

要生成 JavaFX 中的面积图，请按照以下步骤操作。

Step 1: Defining the Axis

定义区域图的 X 和 Y 轴，并为它们设置标签。在我们的示例中，X 轴表示一周中的天数，y 轴表示消耗的水果单位。

public class ClassName extends Application {
   @Override
   public void start(Stage primaryStage) throws Exception {
      //Defining the X axis
      CategoryAxis xAxis = new CategoryAxis();

      //Defining the y Axis
      NumberAxis yAxis = new NumberAxis(0, 15, 2.5);
      yAxis.setLabel("Fruit units");
   }
}

Step 2: Creating the Area Chart

通过实例化 javafx.scene.chart 包中的名为 AreaChart 的类来创建一个折线图。向此类的构造函数传递在上一步骤中创建的表示 X 和 Y 轴的对象。

//Creating the Area chart
AreaChart<String, Number> areaChart = new AreaChart(xAxis, yAxis);
areaChart.setTitle("Average fruit consumption during one week");

Step 3: Preparing the data

实例化 XYChart.Series 类。然后将数据（一系列 x 和 y 坐标）添加到此类的 Observable 列表中，如下所示 −

//Prepare XYChart.Series objects by setting data
XYChart.Series series1 = new XYChart.Series();
series1.setName("John");
series1.getData().add(new XYChart.Data("Monday", 3));
series1.getData().add(new XYChart.Data("Tuesday", 4));
series1.getData().add(new XYChart.Data("Wednesday", 3));
series1.getData().add(new XYChart.Data("Thursday", 5));
series1.getData().add(new XYChart.Data("Friday", 4));
series1.getData().add(new XYChart.Data("Saturday", 10));
series1.getData().add(new XYChart.Data("Sunday", 12));

XYChart.Series series2 = new XYChart.Series();
series2.setName("Jane");
series2.getData().add(new XYChart.Data("Monday", 1));
series2.getData().add(new XYChart.Data("Tuesday", 3));
series2.getData().add(new XYChart.Data("Wednesday", 4));

series2.getData().add(new XYChart.Data("Thursday", 3));
series2.getData().add(new XYChart.Data("Friday", 3));
series2.getData().add(new XYChart.Data("Saturday", 5));
series2.getData().add(new XYChart.Data("Sunday", 4));

Step 4: Add Data to the Area Chart

将上一步骤中准备好的数据序列添加到折线图，如下所示：

//Setting the XYChart.Series objects to area chart
areaChart.getData().addAll(series1,series2);

Step 5: Creating a Group Object

在 start() 方法中，通过实例化名为 Group 、属于包 javafx.scene 的类来创建组对象。

将上一步骤中创建的 AreaChart（节点）对象作一个参数传递给 Group 类的构造函数。应当这样做才能像如下所示将其添加到组中 −

Group root = new Group(areaChart);

Step 6: Launching Application

最后，按照下面给出的步骤正确启动应用程序 −

首先，通过将组对象作为其构造函数的参数值传递来实例化名为 Scene 的类。你也可以将应用程序屏幕的尺寸作为可选参数传递给此构造函数。
然后，使用 Stage 类的 setTitle() 方法设置阶段标题。
现在，使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到阶段。
使用名为 show() 的方法显示场景的内容。
最后，借助 launch() 方法启动应用程序。

Example

下表描绘了 John 和 Jane 在一周内食用的水果数量。

Day of the Week	Fruits consumed by John	Fruits consumed by Jane
Monday	3	1
Tuesday	4	3
Wednesday	3	4
Thursday	5	3
Friday	4	3
Saturday	10	5
Sunday	12	4

以下是一个 Java 程序，它使用 JavaFX 生成区域图，描绘以上数据。

将此代码保存在名为 AreaChartExample.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;

public class AreaChartExample extends Application {
   @Override
   public void start(Stage stage) {
      //Defining the X axis
      CategoryAxis xAxis = new CategoryAxis();

      //defining the y Axis
      NumberAxis yAxis = new NumberAxis(0, 15, 2.5);
      yAxis.setLabel("Fruit units");

      //Creating the Area chart
      AreaChart<String, Number> areaChart = new AreaChart(xAxis, yAxis);
      areaChart.setTitle("Average fruit consumption during one week");

      //Prepare XYChart.Series objects by setting data
      XYChart.Series series1 = new XYChart.Series();
      series1.setName("John");
      series1.getData().add(new XYChart.Data("Monday", 3));
      series1.getData().add(new XYChart.Data("Tuesday", 4));
      series1.getData().add(new XYChart.Data("Wednesday", 3));
      series1.getData().add(new XYChart.Data("Thursday", 5));
      series1.getData().add(new XYChart.Data("Friday", 4));
      series1.getData().add(new XYChart.Data("Saturday", 10));
      series1.getData().add(new XYChart.Data("Sunday", 12));

      XYChart.Series series2 = new XYChart.Series();
      series2.setName("Jane");
      series2.getData().add(new XYChart.Data("Monday", 1));
      series2.getData().add(new XYChart.Data("Tuesday", 3));
      series2.getData().add(new XYChart.Data("Wednesday", 4));
      series2.getData().add(new XYChart.Data("Thursday", 3));
      series2.getData().add(new XYChart.Data("Friday", 3));
      series2.getData().add(new XYChart.Data("Saturday", 5));
      series2.getData().add(new XYChart.Data("Sunday", 4));

      //Setting the XYChart.Series objects to area chart
      areaChart.getData().addAll(series1,series2);

      //Creating a Group object
      Group root = new Group(areaChart);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 400);

      //Setting title to the Stage
      stage.setTitle("Area Chart");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls AreaChartExample.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls AreaChartExample

执行后，上述程序会生成一个 JavaFX 窗口，显示如下所示的区域图。

Example

我们再看另一个示例，在其中尝试通过 2017 年 - 2022 年来描绘两个不同城市的人口增长情况。

Years	Population in City A	Population in City B
2017	3000	1678
2018	4573	2374
2019	5753	4124
2020	6476	5963
2021	7340	7570
2022	8301	8500

将此代码保存在名为 AreaChartPopulation.java 的文件中。

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.CategoryAxis;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;

public class AreaChartPopulation extends Application {
   @Override
   public void start(Stage stage) {
      //Defining the X axis
      NumberAxis xAxis = new NumberAxis(2017, 2022, 1);
      xAxis.setLabel("Years");

      //defining the y Axis
      NumberAxis yAxis = new NumberAxis();
      yAxis.setLabel("Population");

      //Creating the Area chart
      AreaChart<String, Number> areaChart = new AreaChart(xAxis, yAxis);
      areaChart.setTitle("Population in Two Cities Over Years");

      //Prepare XYChart.Series objects by setting data
      XYChart.Series series1 = new XYChart.Series();
      series1.setName("City A");
      series1.getData().add(new XYChart.Data(2017, 3000));
      series1.getData().add(new XYChart.Data(2018, 4573));
      series1.getData().add(new XYChart.Data(2019, 5753));
      series1.getData().add(new XYChart.Data(2020, 6476));
      series1.getData().add(new XYChart.Data(2021, 7340));
      series1.getData().add(new XYChart.Data(2022, 8301));

      XYChart.Series series2 = new XYChart.Series();
      series2.setName("City B");
      series2.getData().add(new XYChart.Data(2017, 1678));
      series2.getData().add(new XYChart.Data(2018, 2374));
      series2.getData().add(new XYChart.Data(2019, 4124));
      series2.getData().add(new XYChart.Data(2020, 5963));
      series2.getData().add(new XYChart.Data(2021, 7570));
      series2.getData().add(new XYChart.Data(2022, 8500));

      //Setting the XYChart.Series objects to area chart
      areaChart.getData().addAll(series1,series2);

      //Creating a Group object
      Group root = new Group(areaChart);

      //Creating a scene object
      Scene scene = new Scene(root, 600, 400);

      //Setting title to the Stage
      stage.setTitle("Area Chart");

      //Adding scene to the stage
      stage.setScene(scene);

      //Displaying the contents of the stage
      stage.show();
   }
   public static void main(String args[]){
      launch(args);
   }
}

使用以下命令，从命令提示符编译并执行已保存的 java 文件。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls AreaChartPopulation.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls AreaChartPopulation

执行后，上述程序会生成一个 JavaFX 窗口，显示如下所示的区域图。