Javafx 简明教程

JavaFX - Stacked Area Chart

堆叠区域图表是面积图的一种变体，它显示每个值（例如 - 加班）的贡献趋势。这些区域堆叠在一起，每个系列相邻，但不会与前面的系列重叠。这与区域图表形成对比，在该区域图表中每个系列都会覆盖前面的系列。

StackedArea Chart is a variation of the Area Chart that displays trends of the contribution of each value (For example – overtime). The areas are stacked so that each series adjoins, but does not overlap the preceding series. This contrasts with the Area chart where each series overlays the preceding series.

以下是一个显示人口增长的堆叠图表。

Following is a Stacked chart depicting population growth.

stacked area

Stacked Area Chart in JavaFX

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

In JavaFX, a Stacked Area chart is represented by a class named StackedAreaChart. This class belongs to the package javafx.scene.chart. By instantiating this class, you can create a StackedAreaChart node in JavaFX.

要在 JavaFX 中生成堆叠区域图表，请按照以下提供的步骤操作。

To generate a stacked area chart in JavaFX, follow the steps given below.

Step 1: Defining the Axis

定义堆积面积图的 X 和 Y 轴，并为它们设置标签。在我们的示例中，X 轴表示从 1750 年到 2050 年的不同年份。这些有每个 50 年的主要刻度单位。而 Y 轴表示人口增长（以百万为单位）。

Define the X and Y axis of the stacked area chart and set labels to them. In our example, X axis represents various years from 1750 to 2050. These have major tick units for every 50 years. While the Y axis represents the population growth in millions.

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

      xAxis.setCategories(FXCollections.<String>observableArrayList
      (Arrays.asList("1 750", "1800", "1850", "1900", "1950", "1999", "2050" )));

      //Defining the Y axis
      NumberAxis yAxis = new NumberAxis(0, 10000, 2500);
      yAxis.setLabel("Population in Billions");
   }
}

Step 2: Creating the Stacked Area Chart

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

Create a line chart by instantiating the class named StackedAreaChart of the package javafx.scene.chart. To the constructor of this class, pass the objects representing the X and Y axis created in the previous step.

//Creating the Area chart
StackedAreaChart<String, Number> areaChart = new StackedAreaChart(xAxis, yAxis);
areaChart.setTitle("Historic and Estimated Worldwide Population Growth by Region");

Step 3: Preparing the Data

实例化 XYChart.Series 类并将数据（系列、x 和 y 坐标）添加到此类的可观察列表中，如下所示 −

Instantiate the XYChart.Series class and add the data (a series of, x and y coordinates) to the Observable list of this class as follows −

//Prepare XYChart.Series objects by setting data
XYChart.Series series1 = new XYChart.Series();
series1.setName("Asia");
series1.getData().add(new XYChart.Data("1750", 502));
series1.getData().add(new XYChart.Data("1800", 635));
series1.getData().add(new XYChart.Data("1850", 809));
series1.getData().add(new XYChart.Data("1900", 947));
series1.getData().add(new XYChart.Data("1950", 1402));
series1.getData().add(new XYChart.Data("1999", 3634));
series1.getData().add(new XYChart.Data("2050", 5268));

XYChart.Series series2 = new XYChart.Series();
series2.setName("Africa");
series2.getData().add(new XYChart.Data("1750", 106));
series2.getData().add(new XYChart.Data("1800", 107));
series2.getData().add(new XYChart.Data("1850", 111));
series2.getData().add(new XYChart.Data("1900", 133));
series2.getData().add(new XYChart.Data("1950", 221));
series2.getData().add(new XYChart.Data("1999", 767));
series2.getData().add(new XYChart.Data("2050", 1766));

XYChart.Series series3 = new XYChart.Series();
series3.setName("Europe");
series3.getData().add(new XYChart.Data("1750", 163));
series3.getData().add(new XYChart.Data("1800", 203));
series3.getData().add(new XYChart.Data("1850", 276));
series3.getData().add(new XYChart.Data("1900", 408));
series3.getData().add(new XYChart.Data("1950", 547));
series3.getData().add(new XYChart.Data("1999", 729));
series3.getData().add(new XYChart.Data("2050", 628));

XYChart.Series series4 = new XYChart.Series();
series4.setName("America");
series4.getData().add(new XYChart.Data("1750", 18));
series4.getData().add(new XYChart.Data("1800", 31));

series4.getData().add(new XYChart.Data("1850", 54));
series4.getData().add(new XYChart.Data("1900", 156));
series4.getData().add(new XYChart.Data("1950", 339));
series4.getData().add(new XYChart.Data("1999", 818));
series4.getData().add(new XYChart.Data("2050", 1201));

XYChart.Series series5 = new XYChart.Series();
series5.setName("Oceania");
series5.getData().add(new XYChart.Data("1750", 2));
series5.getData().add(new XYChart.Data("1800", 2));
series5.getData().add(new XYChart.Data("1850", 2));
series5.getData().add(new XYChart.Data("1900", 6));
series5.getData().add(new XYChart.Data("1950", 13));
series5.getData().add(new XYChart.Data("1999", 30));
series5.getData().add(new XYChart.Data("2050", 46));

Step 4: Add Data to the Stacked Area Chart

将在上一步中准备的数据序列添加到堆积面积图，如下所示：

Add the data series prepared in the previous step to the stacked area chart as follows −

//Setting the data to area chart
areaChart.getData().addAll(series1, series2, series3, series4, series5);

Step 5: Creating a Group Object

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

In the start() method, create a group object by instantiating the class named Group, which belongs to the package javafx.scene.

将在上一步中创建的 StackedAreaChart（节点）对象作为参数传递给 Group 类的构造函数。应执行此操作以便将其添加到组中，如下所示：

Pass the StackedAreaChart (node) object created in the previous step as a parameter to the constructor of the Group class. This should be done in order to add it to the group as follows −

Group root = new Group(stackedAreaChart);

Step 6: Launching Application

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

Lastly, follow the given steps below to launch the application properly −

  1. Firstly, instantiate the class named Scene by passing the Group object as a parameter value to its constructor. To this constructor, you can also pass dimensions of the application screen as optional parameters.

  2. Then, set the title to the stage using the setTitle() method of the Stage class.

  3. Now, a Scene object is added to the stage using the setScene() method of the class named Stage.

  4. Display the contents of the scene using the method named show().

  5. Lastly, the application is launched with the help of the launch() method.

Example

下表列出了从 1750 年到 2050 年的不同大陆的人口。

The following table lists out the population of different continents from year 1750 till year 2050.

Asia

Africa

Europe

America

Oceania

1750

502

106

163

18

2

1800

635

107

203

31

2

1850

809

111

276

54

2

1900

947

133

408

156

6

1950

1402

221

547

339

13

1999

3634

767

729

818

30

2050

5268

1766

628

1201

46

以下是使用 JavaFX 根据上述数据生成堆积面积图的 Java 程序。

Following is a Java program which generates a stacked area chart depicting the above data using JavaFX.

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

Save this code in a file with the name StackedAreaChartExample.java.

import java.util.Arrays;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.collections.FXCollections;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.chart.CategoryAxis;
import javafx.stage.Stage;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.StackedAreaChart;
import javafx.scene.chart.XYChart;

public class StackedAreaChartExample extends Application {
   @Override
   public void start(Stage stage) {
      //Defining the axes
      CategoryAxis xAxis = new CategoryAxis();
      xAxis.setCategories(FXCollections.<String>observableArrayList(
      Arrays.asList("1750", "1800", "1850", "1900", "1950", "1999", "2050" )));

      NumberAxis yAxis = new NumberAxis(0, 10000, 2500);
      yAxis.setLabel("Population in Millions");

      //Creating the Area chart
      StackedAreaChart<String, Number> areaChart = new StackedAreaChart(xAxis, yAxis);
      areaChart.setTitle("Historic and Estimated Worldwide Population Growth by Region");

      //Prepare XYChart.Series objects by setting data
      XYChart.Series series1 = new XYChart.Series();

      series1.setName("Asia");
      series1.getData().add(new XYChart.Data("1750", 502));
      series1.getData().add(new XYChart.Data("1800", 635));
      series1.getData().add(new XYChart.Data("1850", 809));
      series1.getData().add(new XYChart.Data("1900", 947));
      series1.getData().add(new XYChart.Data("1950", 1402));
      series1.getData().add(new XYChart.Data("1999", 3634));
      series1.getData().add(new XYChart.Data("2050", 5268));

      XYChart.Series series2 = new XYChart.Series();
      series2.setName("Africa");
      series2.getData().add(new XYChart.Data("1750", 106));
      series2.getData().add(new XYChart.Data("1800", 107));
      series2.getData().add(new XYChart.Data("1850", 111));
      series2.getData().add(new XYChart.Data("1900", 133));
      series2.getData().add(new XYChart.Data("1950", 221));
      series2.getData().add(new XYChart.Data("1999", 767));
      series2.getData().add(new XYChart.Data("2050", 1766));

      XYChart.Series series3 = new XYChart.Series();
      series3.setName("Europe");

      series3.getData().add(new XYChart.Data("1750", 163));
      series3.getData().add(new XYChart.Data("1800", 203));
      series3.getData().add(new XYChart.Data("1850", 276));
      series3.getData().add(new XYChart.Data("1900", 408));
      series3.getData().add(new XYChart.Data("1950", 547));
      series3.getData().add(new XYChart.Data("1999", 729));
      series3.getData().add(new XYChart.Data("2050", 628));

      XYChart.Series series4 = new XYChart.Series();
      series4.setName("America");
      series4.getData().add(new XYChart.Data("1750", 18));
      series4.getData().add(new XYChart.Data("1800", 31));
      series4.getData().add(new XYChart.Data("1850", 54));
      series4.getData().add(new XYChart.Data("1900", 156));
      series4.getData().add(new XYChart.Data("1950", 339));
      series4.getData().add(new XYChart.Data("1999", 818));
      series4.getData().add(new XYChart.Data("2050", 1201));

      XYChart.Series series5 = new XYChart.Series();
      series5.setName("Oceania");
      series5.getData().add(new XYChart.Data("1750", 2));
      series5.getData().add(new XYChart.Data("1800", 2));
      series5.getData().add(new XYChart.Data("1850", 2));
      series5.getData().add(new XYChart.Data("1900", 6));
      series5.getData().add(new XYChart.Data("1950", 13));
      series5.getData().add(new XYChart.Data("1999", 30));
      series5.getData().add(new XYChart.Data("2050", 46));

      //Setting the data to area chart
      areaChart.getData().addAll(series1, series2, series3, series4, series5);

      //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("Stacked 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 文件。

Compile and execute the saved java file from the command prompt using the following commands.

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

执行时，以上程序生成一个 JavaFX 窗口，显示堆积面积图，如下所示。

On executing, the above program generates a JavaFX window displaying a stacked area chart as shown below.

stacked area example

Example

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

The following table depicts the number of fruits consumed by John and Jane in a week.

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

以下是使用 JavaFX 根据上述数据生成堆积面积图的 Java 程序。

Following is a Java program which generates a stacked area chart, depicting the above data using JavaFX.

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

Save this code in a file with the name StackedAreaChartFruits.java.

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

public class StackedAreaChartFruits 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
      StackedAreaChart areaChart = new StackedAreaChart(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("Stacked 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);
   }
}