javaFX学习之气泡图(Bubble Chart)（转载）

最新推荐文章于 2023-02-03 16:40:58 发布

brave_zhao

最新推荐文章于 2023-02-03 16:40:58 发布

阅读量1.1k

点赞数

分类专栏： javaFX 文章标签：学习

原文链接：http://www.javafxchina.net/blog/2015/04/doc03_bubblechart/

版权

javaFX 专栏收录该内容

39 篇文章 6 订阅

订阅专栏

本文详细介绍了如何使用JavaFX创建和定制气泡图（BubbleChart）。示例代码展示了如何设置X轴和Y轴，创建数据序列，并通过XYChart.Data类的构造方法指定X、Y值及气泡半径。此外，还讨论了如何通过添加额外值属性来表示数据的第三个维度，以及如何调整坐标轴的刻度标签、网格线和颜色等外观设置，以增强图表的可读性和视觉效果。

摘要由CSDN通过智能技术生成

参考原文地址:DOC-03-34 气泡图(Bubble Chart) | JavaFX中文资料

气泡图（bubble chart），它是一种根据分组数据点绘制气泡的双轴图表。

每个数据项由两到三个参数定义。图展示了一个典型的bubble chart，其中-每个数据项由三个参数表示：X值，Y值和气泡的半径。

图 典型的Bubble chart

创建Bubble Chart

要在JavaFX程序中创建Bubble Chart，至少需要实例化BubbleChart类、定义横向和纵向坐标轴、并且通过使用XYChart.Data类的构造方法来指定一组或多组数据，XYChart.Data类的构造方法可以带有两个或三个参数。例34-1创建了包含两组数据的Bubble chart。每个数据项通过X和Y两个值表示：一个是周数，另一个是产品的预算数

用两个数据参数创建Bubble Chart

/**
 * @author zhaoyong
 * @Date 2022/5/12
 * @Description
 */
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.stage.Stage;


public class BubbleChartSample extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("气泡图例");
        final NumberAxis xAxis = new NumberAxis(1, 53, 4);//设定x轴最小值，最大值，刻度值
        final NumberAxis yAxis = new NumberAxis(0, 80, 10);//设定y轴最小值，最大值，刻度值
        final BubbleChart<Number,Number> blc = new
                BubbleChart<>(xAxis,yAxis);//创建一个气泡图实例
        xAxis.setLabel("星期");
        yAxis.setLabel("预算");
        blc.setTitle("预算检测");

        XYChart.Series series1 = new XYChart.Series();//创建一个数据序列对象
        series1.setName("商品 1");
        series1.getData().add(new XYChart.Data(3, 35));//画出图的数据序列坐标(x轴值,y轴值)相当于确定一个数据点
        series1.getData().add(new XYChart.Data(12, 60));//画出图的数据序列坐标(x轴值,y轴值)相当于确定一个数据点
        series1.getData().add(new XYChart.Data(15, 15));
        series1.getData().add(new XYChart.Data(22, 30));
        series1.getData().add(new XYChart.Data(28, 20));
        series1.getData().add(new XYChart.Data(35, 41));
        series1.getData().add(new XYChart.Data(42, 17));
        series1.getData().add(new XYChart.Data(49, 30));

        XYChart.Series series2 = new XYChart.Series();//创建一个数据序列对象
        series2.setName("商品 2");
        series2.getData().add(new XYChart.Data(8, 15));//画出图的数据序列坐标(x轴值,y轴值)相当于确定一个数据点
        series2.getData().add(new XYChart.Data(13, 23));//画出图的数据序列坐标(x轴值,y轴值)相当于确定一个数据点
        series2.getData().add(new XYChart.Data(15, 45));
        series2.getData().add(new XYChart.Data(24, 30));
        series2.getData().add(new XYChart.Data(38, 78));
        series2.getData().add(new XYChart.Data(40, 41));
        series2.getData().add(new XYChart.Data(45, 57));
        series2.getData().add(new XYChart.Data(47, 23));//画出图的数据序列坐标(x轴值,y轴值)相当于确定一个数据点

        Scene scene  = new Scene(blc);//创建场景对象，上面挂载报告图对象
        blc.getData().addAll(series1, series2);//数据图对象上挂载前文定义的数据序列对象
        stage.setScene(scene);//舞台挂载场景
        stage.show();//舞台展现
    }

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

此程序在NumberAxis类的构造方法中定义了数据范围的上下限和刻度单元。另外，由于次级刻度间隔设置为4，所以每个次级刻度都相当于一周

为了让纵轴表示以美元为单位的钱的数量，可以使用一个刻度标签格式器（Formatter）

NumberAxis.DefaultFormatter类可以为指定坐标轴的刻度标签添加前缀和后缀。在例中，Formatter为纵轴的每个刻度标签定义了一个美元（$）前缀符号。表示后缀的参数值为null意味着没有添加后缀。应用了格式化后的bubble chart如图所示。

格式化刻度标签

Java

1	yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,"$ ",null));

________________________________________

使用ExtraValue属性

图中的Bubble Chart显示了一年内两个产品的预算信息。不过你还可以加强此程序并且从BubbleChart类的附加功能中收益。在给Bubble Chart指定数据组时可以使用extraValue属性并且定义XYChart.Data对象中的三个参数。

改变预算监控程序的数据组，每个气泡表示特定产品已用预算的百分比。XYChart.Data对象的第三个参数定义了每个气泡的半径：半径越大表示已用预算的百分比越大。因此7.5的半径相当于用掉了75%的预算，5.5半径就表示用掉了55%，以此类推

/**
 * @author zhaoyong
 * @Date 2022/5/12
 * @Description
 */
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.stage.Stage;


public class BubbleChartSample extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("气泡图例");
        final NumberAxis xAxis = new NumberAxis(1, 53, 4);//设定x轴最小值，最大值，刻度值
        final NumberAxis yAxis = new NumberAxis(0, 80, 10);//设定y轴最小值，最大值，刻度值
        final BubbleChart<Number,Number> blc = new
                BubbleChart<>(xAxis,yAxis);//创建一个气泡图实例
        xAxis.setLabel("星期");
        yAxis.setLabel("预算");
        blc.setTitle("预算检测");

        XYChart.Series series1 = new XYChart.Series();//创建一个数据序列对象
        series1.setName("商品 1");

        series1.getData().add(new XYChart.Data(3, 35, 2));//画出图的数据序列坐标(x轴值,y轴值,气泡半径)相当于确定一个数据点
        series1.getData().add(new XYChart.Data(12, 60, 1.8));
        series1.getData().add(new XYChart.Data(15, 15, 7));
        series1.getData().add(new XYChart.Data(22, 30, 2.5));
        series1.getData().add(new XYChart.Data(28, 20, 1));
        series1.getData().add(new XYChart.Data(35, 41, 5.5));
        series1.getData().add(new XYChart.Data(42, 17, 9));
        series1.getData().add(new XYChart.Data(49, 30, 1.8));

        XYChart.Series series2 = new XYChart.Series();//创建一个数据序列对象
        series2.setName("商品 2");
        series2.getData().add(new XYChart.Data(8, 15, 2));//画出图的数据序列坐标(x轴值,y轴值,气泡半径)相当于确定一个数据点
        series2.getData().add(new XYChart.Data(13, 23, 1));
        series2.getData().add(new XYChart.Data(15, 45, 3));
        series2.getData().add(new XYChart.Data(24, 30, 4.5));
        series2.getData().add(new XYChart.Data(38, 78, 1));
        series2.getData().add(new XYChart.Data(40, 41, 7.5));
        series2.getData().add(new XYChart.Data(45, 57, 2));
        series2.getData().add(new XYChart.Data(47, 23, 3.8));
        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,"$ ",null));
        Scene scene  = new Scene(blc);//创建场景对象，上面挂载报告图对象
        blc.getData().addAll(series1, series2);//数据图对象上挂载前文定义的数据序列对象
        stage.setScene(scene);//舞台挂载场景
        stage.show();//舞台展现
    }

    public static void main(String[] args) {
        launch(args);//启动javaFX程序
    }
}
预算监控程序添加了以上代码以后，编译并运行的结果如图

改变绘图区和刻度标记的外观设置

你可以改变绘图区和坐标轴的外观。检查JavaFX的API文档中一些可用的属性和方法来修改预算监控程序的外观。

verticalGridLinesVisible和horizontalGridLinesVisible属性可以控制网格线显示与否。

除了绘图区的属性之外，也可以修改坐标轴的属性来得到所需要的外观

/**
 * @author zhaoyong
 * @Date 2022/5/12
 * @Description
 */
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.paint.Color;
import javafx.stage.Stage;


public class BubbleChartSample extends Application {

    @Override public void start(Stage stage) {
        stage.setTitle("气泡图例");
        final NumberAxis xAxis = new NumberAxis(1, 53, 4);//设定x轴最小值，最大值，刻度值
        final NumberAxis yAxis = new NumberAxis(0, 80, 10);//设定y轴最小值，最大值，刻度值
        final BubbleChart<Number,Number> blc = new
                BubbleChart<>(xAxis,yAxis);//创建一个气泡图实例
        xAxis.setLabel("星期");
        yAxis.setLabel("预算");
        blc.setTitle("预算检测");

        XYChart.Series series1 = new XYChart.Series();//创建一个数据序列对象
        series1.setName("商品 1");

        series1.getData().add(new XYChart.Data(3, 35, 2));//画出图的数据序列坐标(x轴值,y轴值,气泡半径)相当于确定一个数据点
        series1.getData().add(new XYChart.Data(12, 60, 1.8));
        series1.getData().add(new XYChart.Data(15, 15, 7));
        series1.getData().add(new XYChart.Data(22, 30, 2.5));
        series1.getData().add(new XYChart.Data(28, 20, 1));
        series1.getData().add(new XYChart.Data(35, 41, 5.5));
        series1.getData().add(new XYChart.Data(42, 17, 9));
        series1.getData().add(new XYChart.Data(49, 30, 1.8));

        XYChart.Series series2 = new XYChart.Series();//创建一个数据序列对象
        series2.setName("商品 2");
        series2.getData().add(new XYChart.Data(8, 15, 2));//画出图的数据序列坐标(x轴值,y轴值,气泡半径)相当于确定一个数据点
        series2.getData().add(new XYChart.Data(13, 23, 1));
        series2.getData().add(new XYChart.Data(15, 45, 3));
        series2.getData().add(new XYChart.Data(24, 30, 4.5));
        series2.getData().add(new XYChart.Data(38, 78, 1));
        series2.getData().add(new XYChart.Data(40, 41, 7.5));
        series2.getData().add(new XYChart.Data(45, 57, 2));
        series2.getData().add(new XYChart.Data(47, 23, 3.8));
        yAxis.setTickLabelFormatter(new NumberAxis.DefaultFormatter(yAxis,"$ ",null));
        Scene scene  = new Scene(blc);//创建场景对象，上面挂载报告图对象
        blc.getData().addAll(series1, series2);//数据图对象上挂载前文定义的数据序列对象
        blc.setVerticalGridLinesVisible(false);//去掉垂直网格线
        blc.setHorizontalGridLinesVisible(false);//去掉水平网格线
        xAxis.setTickLabelFill(Color.GREEN);//x轴刻度线颜色
        yAxis.setTickLabelFill(Color.BLUE);//Y轴刻度线颜色的设置
        stage.setScene(scene);//舞台挂载场景
        stage.show();//舞台展现
    }

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