JavaFX BarChart组件能够在JavaFX应用程序内绘制条形图。这在类似仪表板的应用程序中很有用。 JavaFX BarChart组件由类javafx.scene.chart.BarChart表示。

条形图X轴和Y轴

JavaFX BarChart绘制条形图。条形图是二维图形，表示该图形具有X轴和Y轴。对于条形图，X轴通常是某种类别，Y轴是数字。

例如，想象一下一个条形图，该条形图说明了台式机，电话和平板电脑用户访问网站的次数。条形图将显示3条。 X轴上的类别为"桌面"，"电话"和"平板电脑"。 Y轴将显示X轴上每个类别的访问次数，因此Y轴是数字。

我们需要定义BarChart所使用的X轴和Y轴。分类轴由JavaFX类javafx.scene.chart.CategoryAxis表示。数字轴由JavaFX类javafx.scene.chart.NumberAxis表示。

这是创建JavaFXCategoryAxis和NumberAxis的示例：

CategoryAxis xAxis    = new CategoryAxis();
xAxis.setLabel("Devices");

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

创建条形图

要创建JavaFX BarChart组件，必须创建BarChart类的实例。我们必须将X轴和Y轴实例传递给BarBart构造函数。这是一个JavaFXBarChart实例化示例：

CategoryAxis xAxis    = new CategoryAxis();
xAxis.setLabel("Devices");

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

BarChart     barChart = new BarChart(xAxis, yAxis);

可以在同一条形图中显示多个数据系列。我将在本" BarChart"教程中稍后展示如何执行此操作。

条形图数据系列

要使JavaFXBarChart组件显示任何条形，必须为其提供数据系列。数据系列是数据点的列表。每个数据点包含一个X值和一个Y值。这是创建数据系列并将其添加到" BarChart"组件的示例：

XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("2014");

dataSeries1.getData().add(new XYChart.Data("Desktop", 178));
dataSeries1.getData().add(new XYChart.Data("Phone"  , 65));
dataSeries1.getData().add(new XYChart.Data("Tablet"  , 23));

barChart.getData().add(dataSeries1);

首先，创建一个XYChart.Series实例并命名。其次，将3个XYChart.Data实例添加到XYChart.Series对象。第三，将XYChart.Series对象添加到BarChart对象。

将BarChart添加到场景图

要使" BarChart"可见，必须将其添加到JavaFX场景图中。这意味着将BarChart添加到Scene对象中，或者将BarChart对象添加到添加到Scene对象中的布局组件。

这是向JavaFX场景图添加JavaFXBarChart的示例：

package com.Hyman.javafx.charts;

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

public class BarChartExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("BarChart Experiments");

        CategoryAxis xAxis    = new CategoryAxis();
        xAxis.setLabel("Devices");

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

        BarChart     barChart = new BarChart(xAxis, yAxis);

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data("Desktop", 567));
        dataSeries1.getData().add(new XYChart.Data("Phone"  , 65));
        dataSeries1.getData().add(new XYChart.Data("Tablet"  , 23));

        barChart.getData().add(dataSeries1);

        VBox vbox = new VBox(barChart);

        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(1200);

        primaryStage.show();
    }

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

运行此代码示例产生的应用程序将类似于以下内容：

在同一个条形图中显示多个数据系列

如本教程前面所述，可以在同一BarChart组件中显示多个数据系列。我们只需在BarChart组件中添加多个数据序列即可。

当在同一" BarChart"中显示多个数据系列时，数据点将按其X值(类别)进行分类。因此，不同数据系列中具有相同X值的所有数据点将在条形图中彼此相邻显示。这首先是一个示例，该示例创建两个具有相同X值(类别)的数据点的数据系列：

XYChart.Series dataSeries1 = new XYChart.Series();
dataSeries1.setName("2014");

dataSeries1.getData().add(new XYChart.Data("Desktop", 567));
dataSeries1.getData().add(new XYChart.Data("Phone"  , 65));
dataSeries1.getData().add(new XYChart.Data("Tablet"  , 23));

barChart.getData().add(dataSeries1);

XYChart.Series dataSeries2 = new XYChart.Series();
dataSeries2.setName("2014");

dataSeries2.getData().add(new XYChart.Data("Desktop", 540));
dataSeries2.getData().add(new XYChart.Data("Phone"  , 120));
dataSeries2.getData().add(new XYChart.Data("Tablet"  , 36));

barChart.getData().add(dataSeries2);

请注意，两个数据系列中的XYChart.Data实例如何对X使用相同的三个值("桌面"，"电话"和"平板电脑")。

这是一个完整的示例，显示了添加到BarChart并显示在场景图中的两个数据系列：

package com.Hyman.javafx.charts;

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

public class BarChartExperiments extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        primaryStage.setTitle("BarChart Experiments");

        CategoryAxis xAxis    = new CategoryAxis();
        xAxis.setLabel("Devices");

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

        BarChart     barChart = new BarChart(xAxis, yAxis);

        XYChart.Series dataSeries1 = new XYChart.Series();
        dataSeries1.setName("2014");

        dataSeries1.getData().add(new XYChart.Data("Desktop", 567));
        dataSeries1.getData().add(new XYChart.Data("Phone"  , 65));
        dataSeries1.getData().add(new XYChart.Data("Tablet"  , 23));

        barChart.getData().add(dataSeries1);

        XYChart.Series dataSeries2 = new XYChart.Series();
        dataSeries2.setName("2014");

        dataSeries2.getData().add(new XYChart.Data("Desktop", 540));
        dataSeries2.getData().add(new XYChart.Data("Phone"  , 120));
        dataSeries2.getData().add(new XYChart.Data("Tablet"  , 36));

        barChart.getData().add(dataSeries2);

        VBox vbox = new VBox(barChart);

        Scene scene = new Scene(vbox, 400, 200);

        primaryStage.setScene(scene);
        primaryStage.setHeight(300);
        primaryStage.setWidth(1200);

        primaryStage.show();

    }

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

运行此示例所产生的应用程序将类似于以下内容：

注意来自两个不同数据系列的数据是如何混合的。 X值为"桌面"的数据点彼此相邻显示，X值为"电话"和"平板电脑"的数据点也是如此。