DOC-03-35 散布图(Scatter Chart)

本章介绍散布图(Scatter Chart),它是一种用一组点来表示数据的双轴图表。

每个点通过X和Y值来定义。跟其他双轴图表类似,你可以创建一组或者多组数据。图35-1展示了一个带有三组数据的Scatter Chart。

35-1 散布图样例

3-35-1 scatter-sample

创建散布图

要创建散布图,需要定义至少一组数据、设置横轴和纵轴、通过实例化ScatterChart类创建图表并且把数据指定给图表。例35-1示范了怎样创建一个有两组数据的简单散布图。

35-1 有两组数据的散布图

在这个例子中,ScatterChart对象由两个NumberAxis创建,表示数值型的年份和收益数额。数据范围和刻度单元在NumberAxis的构造方法中定义。

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

35-2 有两组投资数据的散布图

3-35-2 scatter-create

管理图表数据

例35-1中图表的数据是在程序中硬编码来指定的,不能通过用户界面来修改。可以在程序中使用UI控件来管理图表所表示的数据集,例如添加和移除一组数据。

查看例35-2中的代码,在该例中创建了两个按钮,分别名为“Add Series”和“Remove Series”,使用它们来控制数据集。

35-2 使用按钮来管理图表数据

例35-1中直接把Scatter Chart添加到scene中,例35-2使用VBox和HBox布局容器来排列scene中的组件。

在例35-3中为“Add Series”按钮定义了setOnAction方法。它通过为XYChart.Series对象填充随机计算出来的值来创建一组新的数据。每一组新数据都通过add(series)方法添加到图表中。

35-3 添加数据

要从图表中移除数据,可以如例35-4所示为“Remove Series”按钮定义setOnAction方法。通过随机生成的索引编号,调用Scatter Chart的remove(int)方法来移除数据。

35-4 移除数据

在你将例35-3和35-4中的代码加到例35-2的程序中后,程序的输出结果如图35-3所示。图中展示了从Option 1组数据增加到5组数据时的情况。

35-3 被添加到图表中的数据组

3-35-3 scatter-add

用于展示每组数据的符号是在ScatterChart类的实现中硬编码的。例35-5展示了散布图符号之一的默认样式。

35-5 ScatterChart符号定义样式

你可以通过设置.default-color5.chart-symbol属性的值来改变这个符号的样式。参考《在图表中使用CSS(See Styling Charts with CSS)》一章来获取更多相关信息。

为图表添加效果

在javafx.scene.chart包中所有可用的图表类都是Node类的子类。因此,你可以对每一种图表应用可视化效果或者变换。查看例35-6中的代码片段,它为Scatter Chart创建并应用了一个阴影效果。

35-6 创建并应用阴影效果

当把上面的代码片段加到Investment Overview应用程序中,然后编译并运行之,Scatter Chart就被阴影突出显示出来,如图35-4所示。

35-4 有阴影效果的Scatter Chart

3-35-4 scatter-shadow

需要注意的是:阴影的可视化效果应用到了图表中的所有元素,包括坐标轴、刻度线和刻度值。

改变图表符号

Scatter Chart中的每组数据由modena.css中定义的符号表示,modena.css是JavaFX程序的默认样式表文件。然而,你可以通过实现自己的样式表来改变图表符号。

创建Chart.css文件并且保存到AreaChartSample程序主类所在的目录下,在该文件中加入例35-7所示内容。

35-7 CSS创建新的图表符号

该代码片段通过定义-fx-shape参数中的SVG路径来创建符号的形状,并且设置了图表符号的笔画颜色。

使用Scene类的getStylesheets()方法来将样式表应用到程序中,如例35-8所示。

35-8 Scene应用CSS样式

编译并运行此程序将使散步图的外观改变,如图35-5所示。

35-5 修改symbol之后的Scatter Chart

3-35-5 scatter-css

你可以从第38章《在图表中使用CSS(Styling Charts with CSS)》和第37章《在UI控件上使用CSS(Styling UI Controls with CSS)》了解更多在JavaFX程序中使用CSS样式的内容。

相关的API文档

· ScatterChart

· Chart

· XYChart

· Data

· Series

· NumberAxis

· Button

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