DOC-03-32 折线图(Line Chart)

本章介绍折线图,折线图是双轴图表的一种,将数据表示成用直线连接的一系列点。

折线图一般用来表示按照一定时间间隔的数据变化情况。图32-1示范了一个典型的折线图,该折线图有3组数据。

32-1 折线图示例

3-32-1 line-sample

每种双轴图表都有两个坐标轴、数据点区和图例,同时也可以指定标题。

图表设置

每种图表都可以指定标题以及标题与图形的相对位置,标题可以放在图形的上、下、左、右四个方向。同样,也可以指定图例的相对位置。

对于双轴图表,你可以管理绘图区和图表区的外观,可以设置是否显示列和行,还可以设置水平网格线、垂直网格线和基准线是否显示。

通过以下设置可以改变折线图的默认外观:

· 坐标轴的标签

· 坐标轴与绘图区的相对位置

· 坐标轴范围的上下边界

· 最大和最小刻度线、刻度单元、刻度线之间的间隔、刻度的标签

你也可以设置对坐标轴及其范围的的任何改变都以动画方式展现,或者也可以让坐标轴根据数据来自动确定它的范围。

图表数据

所有双轴图表的父类XYChart提供了创建分区图、折线图、柱状图、散布图和气泡图的基本功能。使用XYChart.Data类来为这些图表指定数据模型。xValue属性定义图表元素的X轴坐标值,yValue属性定义图表元素的Y轴坐标值。也可以为每个图表元素设置额外的值,该值可以根据图表需要的方式来绘制,或者用来存储该图表元素的附加信息。例如,在气泡图中它可以用来定义半径。

对于双轴图表,你可以使用XYChart.Series类来定义多组数据,也可以为每组数据指定一个独有的名字来显示在图例中。

创建折线图

要创建一个折线图,至少需要定义两个坐标轴、创建LineChart类实例、使用XYChart.Series类创建一组或多组数据并且把数据分配给已创建的LineChart实例。例32-1完成了上述任务。

32-1 简单折线图

在上面的例子中,使用Axis类的子类NumberAxis创建了横轴和纵轴,它表示带有数值的坐标轴。在指定X和Y坐标为数值坐标之后,在创建一组数据时需要给XYChart.Data对象指定Number参数。XYChart.Data对象的第一个参数定义了横轴坐标值,第二个参数则定义了纵轴坐标值。

图32-2展示了这个程序的运行结果。

32-2 带有一组数据的折线图

3-32-2 line-series

上图展示的折线图使用小圆圈符号来突出显示每个数据项。如果你想展示图中的数据趋势而不是具体的数据值,可以禁用掉图表符号,如例32-2所示。

32-2 禁用折线图的符号化

图32-1就是一个趋势图的样例。

在图32-1中,坐标轴与绘图区的相对位置是默认的。当然,也可以通过调用setSide方法来让某个坐标轴显示到绘图区的另一侧。例32-3展示了如何将横轴移到绘图区的上方。

32-3 指定坐标轴位置

为折线图创建分类

使用CategoryAxis类来代替NumberAxis类以使折线图中出现非数值型数据。

检查一下例32-4中修改后的代码。该程序用CategoryAxis实例创建了横轴。为了适应横轴数据类型的变化,LineChart对象的声明也做了修改。

32-4 使用来展示CategoryAxis月份

XYChartData对象包含月份名称和对应的数值,横轴的标签也相应做了修改。

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

32-3 横轴为CategoryAxis的折线图

3-32-3 line-categories

通常折线图可用于分析同一时间段内的不同数据集。使用多组XYChart.Data对象可以实现这个功能。

为折线图增加数据序列

例32-5提供了带有三组数据的股票监视程序源码。除了前一个例子中展示的那一个数据序列之外,还另外声明了两个新的数据序列。

这些数据序列通过连续调用getData和addAll方法添加到了图表之中。

32-5 向股票监视样例中增加两个新的数据序列

每个数据序列都通过调用setName方法定义了一个唯一的名称。编译并运行此程序的结果如图32-4所示。

32-4 带有三个数据序列的股票监视样例

3-32-4 line-three

需要注意,折线的不同颜色根据addAll方法中相应数据序列的声明顺序决定。如果这样来修改声明顺序:lineChart.getData().addAll(series3, series1, series2),然后再编译并运行该程序。修改后的输出结果如图32-5所示。

32-5改变折线图中数据序列的顺序

3-32-5 line-order

相关的API文档

· LineChart

· Chart

· XYChart

· Data

· Series

· Axis

· NumberAxis

· CategoryAxis

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