DOC-03-33 面积图(Area Chart)

本章介绍面积图(Area Chart),另外一种双轴图表。

与折线图类似,面积图用直线连接的一组点来表示数据。但是,坐标轴和连线之间的区域是带有颜色的。每一组数据都会用不同的颜色来绘制。图33-1展示了一个带有两组数据的面积图。

33-1 典型的面积图

3-33-1 area-sample

创建面积图

要在你的程序中创建一个简单的面积图,你至少需要定义两个坐标轴、通过实例化AreaChart类来创建AreaChart对象、使用XYChart.Series类创建一组或多组数据并且将数据分配给图表。

实例化AreaChart类时,你可以在构造方法中指定一组数据,或者也可以在实例化以后通过调用AreaChart对象的getData和addAll方法来增加数据。

例33-1创建了一个面积图来展示温度监控数据。该例子使用了4月和5月收集的两组数据。

33-1 创建面积图

该示例创建了两个NumberAxis对象来表示带有数值的横轴和纵轴。横轴(X轴)的数据来自于XYChart.Data对象的第一个参数,而第二个参数则提供了Y轴的数据。

将数据序列分配给图表可通过调用getData和addAll方法来完成。因为seriesMay的数据是最后添加的,因此对应的绿色区域是覆盖在4月份的黄色区域之上的。

上例的运行结果展示在图33-2中。

33-2 带有两组数据的面积图

3-33-2 area-create

创建堆积(Stacked)面积图

在面积图中可以通过使用StackedAreaChart类来表示数据。这个类创建的区域是堆叠起来的,因此每组数据区域会相邻而不会覆盖之前的数据区域。例33-2实现了此任务。

33-2 创建栈式面积图

当你编译并运行此程序时,它会创建如图33-3所示的图表。

33-3 带有两个数据区域的栈式面积图

3-33-3 area-stacked

通过比较图33-3和图33-2中相同的数据可知,在堆积面积图中,显示的是在横轴给定的点上纵轴上的累加值。例如,堆积面积图中5月15日的纵轴数据值是36,与当天的实际温度并不相符。该值表示4月15日和5月15日温度的累加结果。

当你在你的程序中开发面积图时,要记得使用不同类型的面积图(AreaChart或者StackedAreaChart)时,纵轴上的数据表示的含义是不同的。要根据程序目标选择最恰当的数据表示方式。

设置坐标轴和刻度的属性

图33-2和图33-3中的温度监控程序的输出表示了坐标轴上的数值,该数值默认是double类型的,这种方式谈不上对用户友好。例如,每个月的天数应该是整数并且在1-31范围之内,而不应是浮点数。

JavaFX SDK的API提供了多种方法来调整图表坐标轴上的值的展现形式。图33-4展示了图表坐标轴的主要元素,包括刻度线和刻度值,它们显示了刻度范围的数值。

33-4 坐标轴的主要元素

3-33-4 area-tick

你可以通过使用NumberAxis类的构造方法或对应的方法指定数值区间的最小值和最大值,如例33-3所示。

33-3 为横轴指定数据范围

在使用NumberAxis类的带有3个参数的构造方法来设置数值时,要记得第一个参数表示数值范围的最小值,第二个参数表示数值范围的最大值,第三个参数表示刻度单元,也就是在坐标轴上两个刻度之间的差值。

另外,如果你想要禁止显示横轴上的次刻度线(Minor tick mark),可以把minorTickCount属性设置为0,如例33-4所示。

33-4 将次刻度线数量设置为0

该属性定义了显示在每个主刻度线之间的次刻度线的数量。通过把这个值设置为0,你就屏蔽了横轴的次刻度线。

如果你将例33-3和例33-4的代码加到温度监控程序中,横轴的变化如图33-5所示。

33-5 设置横轴

3-33-5 area-xaxis

如果你的程序不想要显示刻度值,使用setTickLabelsVisible方法并设置参数值为false即可。类似的,使用setTickMarkVisible方法并设置参数值为false可以将刻度线隐藏。

使用例33-5中的代码来调整纵轴的值范围。

33-5 为纵轴指定数据范围

通过使用tickLength和minorTickLength属性,你可以调整刻度线以使主刻度线和次刻度线长度相同,如例33-6所示。

33-6 调整主次刻度线的长度

如果你将例33-5和例33-6中的代码添加到温度监控程序中,纵轴发生的变化将如图33-6所示。

33-6 设置纵轴

3-33-6 area-yaxis

增加负值

因为温度监控程序的纵轴是由NumberAxis类创建的,所以你可以为该面积图的数据设置负值。

例33-7中新创建了一组数据,如下。

33-7 用负值增加一组数据

图33-7展示了修改后的温度监控程序,它展示了3月、4月和5月这三个月的天气数据。

33-7 添加负值

3-33-7 area-negative

为面积图添加样式

例33-7中的每个月的颜色是由相应的各组数据在addAll方法中的声明顺序决定的。这就解释了为什么图33-7中3月份的数据是黄色的。你可以通过CSS来设置AreaChart对象的颜色。

创建Chart.css文件并将它保存在AreaChartSample程序主类的相同目录下。将例33-8中的代码加到Chart.css文件中。

33-8 面积图的CSS样式

名为chart-area-symbol的CSS类定义了一组特定数据的图例标识参数。例33-8设置了图例中圆圈的内部颜色和外部颜色。

名为chart-series-area-line的CSS类定义了面积图中连线的参数。在这个例子中,chart-series-area-fill的CSS类目定义了各区域的颜色和透明度。

这些样式通过调用Scene类的getStylesheets方法来应用到AreaChartSample程序中,如例33-9所示。

33-9 Scene应用CSS样式

编译并运行此程序,将会产生如图33-8所示的修改后的面积图外观。

33-8 加入了样式的面积图

3-33-8 area-css

你可以从使用CSS样式化图表章节(第38章)了解更多在JavaFX程序中使用CSS样式的内容。

相关的API文档

· AreaChart

· Chart

· XYChart

· Data

· Series

· NumberAxis

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