DOC-03-36 柱状图(Bar Chart)

本章将介绍柱状图(Bar Chart),一种带有矩形条(Rectangular bar)的双轴图表,Rectangular bar可以水平放置也可以竖垂直放置。

每个Bar的长度与图表表示的特定数据是成比例的。Bar Chart一般用来展示散列数据。你可以使用多组Bar来分类绘制数据,如图36-1所示。

36-1 Bar Chart样例

3-36-1 bar-sample

创建Bar Chart

要在你的JavaFX应用程序中创建Bar Chart,需要创建两个坐标轴、实例化BarClass类、定义数据序列并且把数据指定给Bar Chart。例36-1创建了一个有三组数据的Bar Chart来表示5个国家的金融数据。每个国家的数据被当作一个分类以水平坐标轴上的一组Bar来展示。

36-1 创建有3组数据的Bar Chart

图36-2显示了此应用程序的运行结果。

36-2 创建有3组数据的bar chart

3-36-2 bar-vertical

BarChart类有两个属性分别控制着两个Category数据的间距和同Category数据中两个Bar之间的间距。使用barGap和categoryGap属性来使图表中的Bar更好地分布。例36-2使用setBarGap和setCategoryGap方法来为这两个属性设置了特定的值。

36-2 设置Bar之间和Category之间的间距

水平柱状图(Horizontal Bar Chart)

你可以通过为纵轴定义Category将Bar Chart的方向由垂直变为水平。例36-3为Country Summary应用程序实现了这个需求。将横轴定义为NumberAxis类型,纵轴定义为CategoryAxis类型。不要忘了修改BarChart对象的声明。

36-3 改变Bar Chart的方向

需要注意上面调用了横轴的setTickLabelRotation方法来旋转Label以使文字更加易读。

修改后的程序运行结果如图36-3所示。

36-3 水平柱状图

3-36-3 bar-horizontal

水平柱状图在你想要表示排名数据时会很有用。

创建堆叠柱状图(Stacked Bar Chart)

你可以让Bar Chart中属于同一个Category的Bar都堆叠起来。使用StackedBarChart类来完成,如例36-4所示。

36-4 创建Stacked Bar Chart

在程序中给Stacked Bar Chart定义坐标轴时,你必须要明确地把数据Category指定给某一个坐标轴。例36-4中,通过使用setCategories方法将Category指定给横轴。上例中的程序运行结果如图36-4所示。

36-4 5组数据的Stacked Bar Chart

3-36-4 bar-stacked1

比较图36-3和36-4中同样的数据。Stacked Bar Chart中的区域展示了横轴上任意点在纵轴上的累加值。例如,图36-4的纵轴上澳大利亚2004年的数据范围大概是25000到85000。但例36-4中澳大利亚2004年的数据是57401.85。图26-4中2004年的最高值85000表示澳大利亚2003和2004两年的累加值。

当你在程序中使用Bar Chart时,请记住BarChart和StackedBarChart中纵轴上的数据表示的含义是不一样的。要根应用据程序需求来选择最恰当的图表类型。

你可以通过调用setCategoryGap方法来指定两个Stacked Category之间的距离。例如,可以为Country Summary程序中的Bar Chart将该距离设置为50像素:sbc.setCategoryGap(50)。在例36-4中调用该方法以后,程序运行结果如图36-5所示。

36-5 指定Category的间距后的Stacked Bar Chart

3-36-5 bar-stacked2

让图表中的数据动起来

你可以实现动画图表来说明金融活动的动态特性。例36-5定义了动画时间线并且创建了Key Frames来随机为Bar Chart的数据设置X值。时间线在程序开始时开始,并且在auto-reverse模式中无限的继续下去。

36-5 Bar Chart中的动画数据

将上述代码片段加到例36-3中的Country Summary应用程序中,再次编译运行程序,你将看到坐标轴和绘制区域都会平滑地变化来适应Bar新的范围和长度。这是由Chart和Axis类的animated属性所致。该属性值默认为true来使任何数据改变都以动画形式展现。

在Country Summary应用程序中,当纵轴上的数据是以Category的形式表示并且不会改变时,你可以禁止该轴上的数据动画,以此来避免Country Lbel的闪烁。使用例36-6中所示的setAnimated方法。

36-6 管理数据变化的动画

查看API文档来获取更多关于JavaFX图表特性的信息。

相关的API文档

· BarChart

· Chart

· XYChart

· Data

· Series

· Axis

· NumberAxis

· CategoryAxis

· Timeline

· KeyFrame

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