javafx 堆叠柱状图

创建 JavaFX 堆叠柱状图的完整指南

在这篇文章中，我们将一起实现一个 JavaFX 堆叠柱状图。堆叠柱状图能够很好地展示多个数据系列在相同类别中的比例关系，适合用来比较不同项目或不同时间段的数据。

整体流程概述

下面是实现堆叠柱状图的步骤：

逐步实现

步骤 1：设置 JavaFX 环境

确保您已经安装 Java Development Kit (JDK) 和 JavaFX SDK。可以使用 IntelliJ IDEA 或 Eclipse 等 IDE 来创建项目，并确保将 JavaFX 库添加到项目的类路径中。

步骤 2：创建主应用程序类

下面是创建主类的代码：

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class StackedBarChartExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        // 设置应用程序窗口标题
        primaryStage.setTitle("JavaFX 堆叠柱状图示例");
        
        // 创建主场景并添加到舞台
        StackPane root = new StackPane();
        Scene scene = new Scene(root, 800, 600);
        
        primaryStage.setScene(scene);
        primaryStage.show(); // 显示窗口
    }

    public static void main(String[] args) {
        launch(args); // 启动应用程序
    }
}

步骤 3：创建堆叠柱状图数据

在这个步骤中，我们需要导入必要的 JavaFX 图表类，并创建一些示例数据：

import javafx.scene.chart.BarChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;

public BarChart<String, Number> createStackedBarChart() {
    // 创建X轴和Y轴类型
    NumberAxis yAxis = new NumberAxis();
    yAxis.setLabel("值");
    yAxis.setTickUnit(10);
    
    // 创建X轴
    CategoryAxis xAxis = new CategoryAxis();
    xAxis.setLabel("类别");

    // 创建堆叠柱状图
    BarChart<String, Number> stackedBarChart = new BarChart<>(xAxis, yAxis);
    stackedBarChart.setTitle("堆叠柱状图示例");

    // 创建数据系列
    XYChart.Series<String, Number> series1 = new XYChart.Series<>();
    series1.setName("类别1"); // 系列名称
    series1.getData().add(new XYChart.Data<>("A", 10)); // 数据点
    series1.getData().add(new XYChart.Data<>("B", 20));
    
    XYChart.Series<String, Number> series2 = new XYChart.Series<>();
    series2.setName("类别2");
    series2.getData().add(new XYChart.Data<>("A", 20));
    series2.getData().add(new XYChart.Data<>("B", 30));
    
    // 将数据系列添加到堆叠柱状图
    stackedBarChart.getData().addAll(series1, series2);
    
    return stackedBarChart; // 返回图表
}

步骤 4：实现 UI 界面

在 start 方法中，将创建的堆叠柱状图添加到主场景中：

@Override
public void start(Stage primaryStage) {
    primaryStage.setTitle("JavaFX 堆叠柱状图示例");
    
    StackPane root = new StackPane();
    BarChart<String, Number> stackedBarChart = createStackedBarChart(); // 调用创建图表的方法
    root.getChildren().add(stackedBarChart); // 添加图表到根布局

    Scene scene = new Scene(root, 800, 600);
    primaryStage.setScene(scene);
    primaryStage.show();
}

步骤 5：展示堆叠柱状图

运行程序后，您将看到一个包含堆叠柱状图的窗口。该图表将展示您所定义的数据系列在不同类别中的值。

状态图

下面是使用 Mermaid 语法表示的状态图：

stateDiagram
    [*] --> 设置JavaFX环境
    设置JavaFX环境 --> 创建主应用程序类
    创建主应用程序类 --> 创建堆叠柱状图数据
    创建堆叠柱状图数据 --> 实现UI界面
    实现UI界面 --> 展示堆叠柱状图
    展示堆叠柱状图 --> [*]

总结

通过上述步骤，您已经成功创建了一个简单的 JavaFX 堆叠柱状图。这个过程让您了解了如何设置环境、创建主要应用程序类、构建堆叠柱状图数据、实现用户界面，并展示最终结果。希望这篇文章对您有所帮助！继续探索 JavaFX 的更多功能，您将能够创建更加复杂和多样化的图形界面应用程序！