Javafx 简明教程

JavaFX - Stacked Area Chart

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

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

stacked area

Stacked Area Chart in JavaFX

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

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

Step 1: Defining the Axis

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

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 轴的对象传递给此类的构造函数。

//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 坐标）添加到此类的可观察列表中，如下所示 −

//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

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

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

Step 5: Creating a Group Object

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

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

Group root = new Group(stackedAreaChart);

Step 6: Launching Application

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

  1. 首先，通过将组对象作为其构造函数的参数值传递来实例化名为 Scene 的类。你也可以将应用程序屏幕的尺寸作为可选参数传递给此构造函数。

  2. 然后，使用 Stage 类的 setTitle() 方法设置阶段标题。

  3. 现在，使用名为 Stage 的类的 setScene() 方法将 Scene 对象添加到阶段。

  4. 使用名为 show() 的方法显示场景的内容。

  5. 最后，借助 launch() 方法启动应用程序。

Example

下表列出了从 1750 年到 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 程序。

将此代码保存在名为 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 文件。

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

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

stacked area example

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

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

将此代码保存在名为 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);
   }
}