DOC-03-34 气泡图(Bubble Chart)

本章介绍气泡图(bubble chart),它是一种根据分组数据点绘制气泡的双轴图表。

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

34-1 典型的Bubble chart

3-34-1 bubble-sample

创建Bubble Chart

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

34-1 用两个数据参数创建Bubble Chart

编译并运行此程序的结果如图34-2所示。

34-2用两个数据参数创建Bubble Chart

3-34-2 bubble-two-parameters

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

为了让纵轴表示以美元为单位的钱的数量,可以使用一个刻度标签格式器(Formatter),如例34-2所示。

34-2 格式化刻度标签

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

34-3 为刻度标签指定前缀

3-34-3 bubble-format

使用ExtraValue属性

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

例34-3中的代码片段示范了怎样改变预算监控程序的数据组,每个气泡表示特定产品已用预算的百分比。XYChart.Data对象的第三个参数定义了每个气泡的半径:半径越大表示已用预算的百分比越大。因此7.5的半径相当于用掉了75%的预算,5.5半径就表示用掉了55%,以此类推。

34-3 添加Extra Value

预算监控程序添加了以上代码以后,编译并运行的结果如图34-4所示。

34-4 展示已用预算的百分比

3-34-4 bubble-three-parameters

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

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

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

除了绘图区的属性之外,也可以修改坐标轴的属性来得到所需要的外观。例34-4中的代码行为刻度标签指定了巧克力色。

34-4 为刻度标签定义填充色

最后,你还可以调整刻度标签与刻度标记的相对位置。使用setTickLabelGap方法来设置纵轴上刻度标签和刻度标记的间距:yAxis.setTickLabelGap(10)。

图34-5展示了预算监控程序整合上述修改以后的运行结果。

34-5 修改气泡图的外观

3-34-5 bubble-style

相关的API文档

· BubbleChart

· Chart

· XYChart

· Data

· Series

· NumberAxis

· DefaultFormatter

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_bubblechart/
百度已收录