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

最新推荐文章于 2023-02-20 20:47:07 发布
最新推荐文章于 2023-02-20 20:47:07 发布
阅读量1k 收藏 1
点赞数
分类专栏： javaFX 文章标签： 学习
原文链接：http://www.javafxchina.net/blog/2015/04/doc03_bubblechart/
版权

参考原文地址: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程序
    }
}

 

 

 

brave_zhao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bubblechart-panel:grafana监控系统的气泡图面板
05-14
用于Grafana的气泡图面板插件 该面板旨在以气泡图的形式集中显示任何组件。 根据标记值和圆圈大小，将圆圈分组在一起，聚类的大小和颜色代表时间序列数据的汇总值。 分组 圆按照别名格式分为多个簇。 由别名字段中的组分隔符分隔的标记值定义了图表层次结构和分组。 例如，“ $ tag_dc，$ tag_host”或“数据中心：$ tag_dc，主机：$ tag_host”会将每个数据中心圈下的所有主机分组。 默认情况下，逗号是可以在“选项”选项卡下更改的组分隔符。 选项 显示文字-启用/禁用圆圈内的文字显示。 统计-汇总数据与singlestat面板相同。 单位-格式与单状态面板相同。 将鼠标悬停在任何圆圈上将显示格式化的值。 组分隔符-别名中的标签值分隔符用于分组。 配色方案-多种配色方案。 分组-在分组方案中，圆按照其分组进行着色。 颜色-组层次结构的颜色的开始和结束范围。
JavaFX图表（五）之气泡图
茅坤宝骏氹的博客
12-23 1118
翻译自   JavaFX - 气泡图 气泡图用于种植三维数据; 第三个维度将由气泡的大小（半径）表示。 以下是描绘完成工作的气泡图。 在JavaFX中，气泡图由名为BubbleChart的类表示。该类属于包javafx.scene.chart。通过实例化此类，您可以在JavaFX中创建BubbleChart节点。 生成气泡图的步骤 要在JavaFX中生成气泡图，请按照以下步骤操作。 ...
数据可视化清新版【chart.js】学习笔记9.0—气泡图(Bubble Chart)
LIMI_伞梦的博客
01-08 2291
Bubble Chart——（气泡图） 气泡图用于同时显示三维数据。气泡的位置由前两个维度以及相应的水平和垂直轴线确定。第三个维度由单个气泡的大小来表示。 官方文档：https://www.chartjs.org/docs/latest/charts/bar.html 用法示例 var myBubbleChart = new Chart(ctx, { type: ‘bubble’, data: data, options: options }); 图表属性（博主这边只列举看出了比较常用和设置影响明显的
bubble chart with color setting in JAVAFX
Mr.Daozhi的博客
10-02 203
    importimport javafx javafx..applicationapplicati .Application; import javafx.scene.Scene; import javafx.scene.chart.BubbleChart; import javafx.scene.chart.NumberAxis; import javafx.scene.chart...
【数字孪生百科】每周认识一个数字孪生要素 —— 气泡图（Bubble Chart）
Shanhaibi的博客
02-03 1315
气泡图（Bubble Chart）是一种多变量的图片，是散点图的一种变体，气泡图其实是在散点图的基础上进行升级改造的，在原有的以横纵坐标为变量的基础上，引入第三个变量，用气泡的大小来表示，是一种展示三个变量之间关系的数据图表，因此被称为气泡图。
JavaFX教程（学习资料）
最新发布
06-16
JavaFX教程；JavaFX教程；JavaFX教程JavaFX教程；
javafx界面+修改图片DPI源码
11-17
运用javafx制作的UI，批量修改图片的DPI
JavaFX学习之Preloader
04-13
NULL 博文链接：https://lujin55.iteye.com/blog/1709828
javafx学习网站
03-11
javafx学习网站
JavaFX学习之样例8
04-16
NULL 博文链接：https://lujin55.iteye.com/blog/1811244
JavaFx Wechat聊天软件
01-26
一个聊天软件，使用JAVAFX来做界面，实现的功能有登入注册，找回密码，更改头像，发送接收消息，查看好友资料，修改好友备注，好友是否在线的提示，消息的提示，气泡的大小自动改变，标为已读未读，清除聊天记录，删除好友，添加好友，好友备注，搜索好友，个人资料的修改查看，设置，聊天助手的提示,右键菜单等功能。
Java气泡提示功能实现
03-14
NULL 博文链接：https://hnicypb.iteye.com/blog/293253
Matlab论文插图绘制模板第41期—气泡图（bubblechart）
qq_26447137的博客
08-01 2653
Matlab气泡图
使用GitHub D3制作一个Bubble Chart简介
youshange的专栏
11-27 1934
今天无意在网上浏览到https://github.com/mbostock/d3/wiki/Gallery这个网址，看了看主要是一个通过js在web页面中显示各种图形，上面有很多demo，自己试着做了一个，写写个人感受。 废话少说，进入正题。这是一个Bubble Chart图。 下面是我在做完Bubble Chart后的感受： 代码我就不粘了，自己可以上上面的那个网址去找。只说怎么做，做这么
【弄nèng - Grafana】入门篇（十一）—— Elasticsearch数据源绘制Bubble Chart气泡图
司马缸砸缸了
03-17 898
文章目录简介1. General2. Metrics3. Options4. Time range5. 事例项目推荐 Bubble Chart 气泡图详解 Bubble Chart 需要安装额外的插件才能使用，地址传送门 简介 Bubble Chart以气泡的形式展示图表，例如现根据服务统计，再根据IP统计，一个大圈代表一个服务，每个大圈中的小圈代表IP。 分组 气泡图根据别名分为多个组，别...
[可视化]Bubble Chart
weixin_30432007的博客
04-22 1405
英文名：Bubble Chart 中文名：气泡图 Demo： 用法：圆圈大小表示权重 转载于:https://www.cnblogs.com/G-M-WuJieMatrix/p/8907418.html
68Echarts - 散点图（Bubble Chart）
阿甘兄
04-30 1529
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
基于Matlab的bubblechart()函数做气泡图
qq_36652087的博客
02-20 795
基于Matlab的bubblechart()函数做气泡图
Javascript散点图气泡图控件Scatter & Bubble chart介绍
weixin_33941350的博客
06-09 225
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaFX学习之Image
05-13
JavaFX的Image类是用来表示图像的类，它可以从文件、URL、输入流或字节数组中读取图像数据，也可以从内存中的WritableImage对象中获取像素数据。 以下是Image类常用的方法： 1. 从文件中读取图像数据 ```java ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值