JavaFX 常见图表组件

图表组件简介

JavaFX 提供了一系列的图表组件，允许开发者在应用程序中轻松集成各种图表和图形。

名称	中文	描述
BarChart	条形图	用于显示条形图，条形图通过水平或垂直的条形来表示数据的大小
PieChart	饼图	用于创建饼图，饼图通过不同扇区的角度来展示数据的比例关系
LineChart	折线图	用于绘制折线图，折线图通过折线连接各个数据点，展示数据随时间或其他序列变化的趋势
AreaChart	面积图	类似于折线图，但在折线下方的区域会被填充颜色或纹理，用于展示量的变化
ScatterChart	散点图	用于显示散点图，散点图通过在坐标系中绘制数据点来展示两个变量之间的关系
BubbleChart	气泡图	是散点图的一种变体，数据点被气泡代替，气泡的大小可以表示第三个数值变量的大小。
StackedBarChart	堆叠条形图	条形图的变体，不同的条形可以堆叠起来，表示各个部分对总量的贡献。

图表组件使用

BarChart（条形图）

用于显示条形图的控件，它通过水平或垂直的条形来展示数据的大小，使得数据比较直观易懂

特性：

1. 双向条形：可以设置为水平条形图或垂直条形图。
2. 轴：包含两个轴，通常一个是类别轴（用于分类数据），另一个是数值轴（用于度量数据）。
3. 数据系列：可以包含一个或多个数据系列，每个系列可以有自己的颜色或样式。
4. 动态数据：支持动态修改数据，图表会自动更新显示。
5. 交互性：可以添加交互功能，如点击或悬停事件，以提供更多信息。
6. 样式定制：可以使用 CSS 来改变条形图的外观。

案例演示

package com.binge.javafxdemo.chart;

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.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.chart.XYChart;

public class BarChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        CategoryAxis xAxis = new CategoryAxis(); // X轴用于分类，使用CategoryAxis
        NumberAxis yAxis = new NumberAxis();     // Y轴用于数值，使用NumberAxis

        // 创建水平条形图
        BarChart<String, Number> barChart = new BarChart<>(xAxis,yAxis);

        // 设置轴的名称
        barChart.getXAxis().setLabel("Category");
        barChart.getYAxis().setLabel("Value");

        // 创建数据系列
        XYChart.Series<String, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>("Item 1", 3));
        series.getData().add(new XYChart.Data<>("Item 2", 7));
        series.getData().add(new XYChart.Data<>("Item 3", 2));

        // 将数据系列添加到条形图中
        barChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(barChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("BarChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

PieChart（饼图）

用于显示饼图的控件，它通过不同扇区的角度来展示数据的比例关系

特性：

1. 数据比例展示：通过扇区的角度大小来表示数据的比例。
2. 环形图：可以设置饼图为环形，即每个扇区之间有空隙。
3. 数据标签：可以为每个扇区添加标签，显示额外的信息。
4. 交互性：支持鼠标悬停和点击事件，用于展示更多数据详情。
5. 样式定制：可以使用 CSS 来改变饼图的外观，如扇区的颜色、标签的样式等。

案例演示

package com.binge.javafxdemo.chart;

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

/**
 * PieChart 饼图示例
 */
public class PieChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建饼图
        PieChart pieChart = new PieChart();

        // 创建数据系列并添加数据点
        PieChart.Data data1 = new PieChart.Data("Item 1", 20);
        PieChart.Data data2 = new PieChart.Data("Item 2", 30);
        PieChart.Data data3 = new PieChart.Data("Item 3", 50);

        // 将数据系列添加到饼图中
        pieChart.getData().add(data1);
        pieChart.getData().add(data2);
        pieChart.getData().add(data3);

        // 创建布局并添加饼图
        StackPane root = new StackPane();
        root.getChildren().add(pieChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("PieChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

LineChart（折线图）

用于显示折线图的控件，它通过折线连接各个数据点，展示数据随时间或其他序列变化的趋势

特性：

1. 时间序列展示：适合展示随时间变化的数据。
2. 多系列数据：可以在同一个图表中展示多个数据系列。
3. 轴：包含两个轴，通常 X 轴是类别轴（用于分类或时间序列），Y 轴是数值轴（用于度量数据）。
4. 动画：数据点和线条可以动画显示。
5. 交互性：支持鼠标滚轮缩放、拖动平移等交互操作。
6. 样式定制：可以使用 CSS 来改变折线图的外观，如线条颜色、数据点样式等。

案例演示

package com.binge.javafxdemo.chart;

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.StackPane;
import javafx.stage.Stage;

public class LineChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建折线图实例
        LineChart<Number, Number> lineChart = new LineChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(1, 10));
        series.getData().add(new XYChart.Data<>(2, 15));
        series.getData().add(new XYChart.Data<>(3, 7));
        series.getData().add(new XYChart.Data<>(4, 20));

        // 将数据系列添加到折线图中
        lineChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(lineChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("LineChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

AreaChart（面积图）

用于显示面积图的控件，它通过在折线下方的区域内填充颜色或纹理来展示数据随时间或其他序列变化的趋势。面积图通常用于展示量随时间的累积效应，或者比较多个数据序列的变化趋势。

特性：

1. 累积量展示：面积图通过填充颜色来表示数据随时间累积的效果。
2. 多系列数据：可以在同一个图表中展示多个数据系列，每个系列可以有不同的填充颜色。
3. 轴：包含两个轴，通常 X 轴是类别轴或时间轴，Y 轴是数值轴。
4. 动画：数据点和面积可以动画显示。
5. 交互性：支持鼠标滚轮缩放、拖动平移等交互操作。
6. 样式定制：可以使用 CSS 来改变面积图的外观，如填充颜色、线条样式等。

案例演示

package com.binge.javafxdemo.chart;

/**
 * AreaChartExample 示例
 */
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.AreaChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class AreaChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建面积图实例
        AreaChart<Number, Number> areaChart = new AreaChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(1, 100));
        series.getData().add(new XYChart.Data<>(2, 250));
        series.getData().add(new XYChart.Data<>(3, 170));
        series.getData().add(new XYChart.Data<>(4, 400));

        // 将数据系列添加到面积图中
        areaChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(areaChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("AreaChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ScatterChart（散点图）

用于显示散点图的控件，它通过在坐标系中绘制数据点来展示两个变量之间的关系。散点图通常用于展示数据的分布情况，分析变量之间的相关性。

特性：

1. 数据分布展示：通过在坐标系中绘制数据点来展示数据的分布。
2. 双轴支持：可以为 X 轴和 Y 轴设置不同的度量单位，适用于不同量纲的数据。
3. 多系列数据：可以在同一个图表中展示多个数据系列，每个系列可以有不同的样式和颜色。
4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
5. 动画：数据点可以动画显示。
6. 样式定制：可以使用 CSS 来改变散点图的外观，如数据点的标记形状、颜色等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.ScatterChart;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * ScatterChartExample 散点图示例
 */
public class ScatterChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建散点图实例
        ScatterChart<Number, Number> scatterChart = new ScatterChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点
        series.getData().add(new XYChart.Data<>(10, 20));
        series.getData().add(new XYChart.Data<>(15, 30));
        series.getData().add(new XYChart.Data<>(25, 10));
        series.getData().add(new XYChart.Data<>(30, 45));

        // 将数据系列添加到散点图中
        scatterChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(scatterChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("ScatterChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

BubbleChart（气泡图）

用于显示气泡图的控件，它是散点图（ScatterChart）的一个变体。在气泡图中，除了在坐标系中通过 (x, y) 坐标点展示数据之外，每个数据点的大小也代表了第三个数值变量的大小，这个大小通过气泡的直径来表示。这使得气泡图能够展示三个数值变量之间的关系。

特性：

1. 三维数据展示：通过 x、y 坐标点的位置和气泡的大小来展示数据。
2. 数据点大小：气泡的大小可以表示数据点的第三个数值维度。
3. 轴：包含两个轴，通常 X 轴和 Y 轴都是数值轴。
4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
5. 动画：数据点可以动画显示。
6. 样式定制：可以使用 CSS 来改变气泡图的外观，如气泡的颜色、边框等。

案例演示

package com.binge.javafxdemo.chart;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.chart.BubbleChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

/**
 * BubbleChartExample 气泡图示例
 */
public class BubbleChartExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        // 创建 X 轴和 Y 轴实例
        NumberAxis xAxis = new NumberAxis();
        NumberAxis yAxis = new NumberAxis();

        // 创建气泡图实例
        BubbleChart<Number, Number> bubbleChart = new BubbleChart<>(xAxis, yAxis);

        // 创建数据系列
        XYChart.Series<Number, Number> series = new XYChart.Series<>();
        series.setName("Sample Data");

        // 添加数据点，设置气泡大小
        series.getData().add(new XYChart.Data<>(1, 2, 10)); // x, y, bubble size
        series.getData().add(new XYChart.Data<>(2, 3, 20));
        series.getData().add(new XYChart.Data<>(3, 4, 15));

        // 将数据系列添加到气泡图中
        bubbleChart.getData().add(series);

        // 创建布局并添加图表
        StackPane root = new StackPane();
        root.getChildren().add(bubbleChart);

        // 创建场景并设置舞台
        Scene scene = new Scene(root, 400, 300);
        primaryStage.setTitle("BubbleChart Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

StackedBarChart（堆叠图）

用于显示堆叠条形图的控件，它将多个条形堆叠在一起，每个条形由多个矩形组成，每个矩形代表一个数据系列的数值部分。堆叠条形图通常用于展示各部分对总量的贡献以及不同类别间的比较。

特性：

1. 数据累加展示：通过堆叠的条形展示每个类别的总量和各部分的数值贡献。
2. 多系列数据：可以在同一个条形中展示多个数据系列，每个系列用不同的颜色表示。
3. 轴：包含两个轴，通常 X 轴是类别轴，Y 轴是数值轴。
4. 交互性：支持鼠标悬停以显示数据点的详细信息，支持点击事件。
5. 动画：条形和数据系列可以动画显示。
6. 样式定制：可以使用 CSS 来改变堆叠条形图的外观，如条形的颜色、边框等

案例演示

package com.binge.javafxdemo.chart;

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

/**
 * StackedBarChartExample 堆叠图示例
 */
public class StackedBarChartExample extends Application {

    @Override
    public void start(Stage stage) {
        // 创建X轴和Y轴
        CategoryAxis xAxis = new CategoryAxis();
        xAxis.setLabel("Category");

        NumberAxis yAxis = new NumberAxis();
        yAxis.setLabel("Value");

        // 创建堆叠条形图
        StackedBarChart<String, Number> stackedBarChart = new StackedBarChart<>(xAxis, yAxis);
        stackedBarChart.setTitle("Stacked Bar Chart Example");

        // 创建系列数据
        XYChart.Series<String, Number> series1 = new XYChart.Series<>();
        series1.setName("Series 1");
        series1.getData().add(new XYChart.Data<>("A", 30));
        series1.getData().add(new XYChart.Data<>("B", 50));
        series1.getData().add(new XYChart.Data<>("C", 70));

        XYChart.Series<String, Number> series2 = new XYChart.Series<>();
        series2.setName("Series 2");
        series2.getData().add(new XYChart.Data<>("A", 40));
        series2.getData().add(new XYChart.Data<>("B", 60));
        series2.getData().add(new XYChart.Data<>("C", 80));

        XYChart.Series<String, Number> series3 = new XYChart.Series<>();
        series3.setName("Series 3");
        series3.getData().add(new XYChart.Data<>("A", 50));
        series3.getData().add(new XYChart.Data<>("B", 70));
        series3.getData().add(new XYChart.Data<>("C", 90));

        // 将系列数据添加到堆叠条形图
        stackedBarChart.getData().addAll(series1, series2, series3);

        // 创建场景并设置舞台
        Scene scene = new Scene(stackedBarChart, 800, 600);
        stage.setScene(scene);
        stage.setTitle("JavaFX Stacked Bar Chart Example");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}