第2章 准 备 数 据
由于Highcharts对数据有严格的规定。所以在图表之前,首先需要准备数据。准备数据主要是将实际数据进行整理和归并,以符合Highcharts的要求。本章将详细讲解如何为Highcharts准备所需要的数据。
2.1 数据的作用
数据是图表展现的主体,所以数据在图表中占有举足轻重的作用。在Highcharts中,数据被赋予了更多重要的作用。从使用角度来说,数据主要发挥以下三大作用。
1.确定图形元素的坐标位置
图表以图形的方式展现数据,每个数据单元对应图中的一个图形元素。而在Highcharts中,图表主要以平面形式展现这些图形元素。为了正确展现每个图形元素,每个图形元素都需要有明确的坐标位置x,y。而坐标位置x,y的数据正是来自于每个数据单元。
2.描述额外的信息
坐标位置只能包含图形元素的最基本信息,而图形元素往往还需要额外的描述信息。例如,柱形图需要指定每个柱体的颜色,气泡图需要指定每个气泡的大小,饼图需要指定每个切片的分离状态,这些信息都需要由数据单元指定。
3.生成坐标轴
坐标轴是图表量值的标尺。通过坐标轴,浏览者可以更为容易地判断数值的大小和范围。默认情况下,Highcharts会根据用户给定的图表数据自动计算坐标轴的刻度范围,这样生成的坐标刻度更符合当前图表的数据呈现。
2.2 Highcharts数据表示
在Highcharts中,将关联的一系列数据称为数据列,构成数据的每一个数据单元称为数据节点。下面详细讲解数据列和数据节点的表示方式。
2.2.1 数据列
数据列就是相关联的一系列数据的集合。例如,第一个实例所呈现的数据就是由7个温度数据构成的集合。它们的关联关系是构成连续的一周的温度。在Highcharts中,数据列使用series表示。一个图表中,可以有一个或者多个数据列。所以,series的值是一个数组。形式如下:
series:[{
第一个数据列的相关配置
},{
第二个数据列的相关配置
},
......
{
第n个数据列的相关配置
}]
每个数据列的设置都可以单独指定。这样,不同数据列设置就不会互相干扰。数据列相关配置中最重要的就是数据配置。它使用配置项data来定义。其形式如下:
data:Array
在data中可以定义数据节点。由于数据节点可以是一个,也可以是多个,所以data值同样是一个数组。
2.2.2 数据节点
数据节点是图表中最小的元素,每个数据节点都是一个数据单元,它确定了图表中一个图形元素的各种信息。一个数据节点通常包括以下3类信息。
1.坐标位置信息
由于Highcharts中大部分的图表都是平面2D类型的,所以每个节点都需要对应的坐标信息x,y。在Highcarts中,坐标信息是通过配置项x和y定义的。其语法形式如下:
x:Number|String
y:Number
其中,配置项x的值可以为数字,也可以是字符串;配置项y必须是数字。
2.其他必须信息
除了坐标信息外,很多图表需要节点提供额外的信息,如柱体的颜色和气泡的大小等。对于这些信息,也是在数据节点中定义的。例如对于柱形图的节点,需要使用配置项color指定该节点对应的柱体的颜色,语法如下:
color:Color
其中,参数Color指定该柱体填充的颜色。
3.用户补充信息
有时,用户想为节点信息做补充,就需要创建自己的配置项,并赋值。这些节点信息可以在提示框和数据标签中显示。例如,在本书第一个实例中,用户可以为每个节点添加配置项,存放最高温度发生的时间。形式如下:
hightemtime:Number|String|Object
其中,配置项名hightemtime是用户自己定义的,其值的类型也是用户自己指定的。
了解节点中包含的信息后,就可以将所有的信息进行定义为,其形式如下:
{
x:Number|String,
y:Number,
color:Color,
hightemtime:Number|String|Object
}
每个节点都是这样的一个对象。而整个数据列的节点就构成一个对象数组,形式如下:
data:[{
x:Number|String,
y:Number,
color:Color,
hightemtime:Number|String|Object
},{
x:Number|String,
y:Number,
color:Color,
hightemtime:Number|String|Object
},
......
{
x:Number|String,
y:Number,
color:Color,
hightemtime:Number|String|Object
}]
【实例2-1:carcount】下面制作一个公交车每站人数变化的图表。其原始数据如表2.1所示。
表2.1 公交车每站乘客数量数
站 次人 数时 间
157:30
287:45
3168:00
4198:10
5268:24
6218:40
7188:50
8149:00
989:15
1049:25
图表需要展现每站人数的变化。所以,每一行数据是一个节点。其中,站次是节点的x值,人数是节点的y值,而时间是补充信息。所以,第一个节点定义方式如下:
{
x:1,对应的x值
y:5,对应的y值
atime:''7:30''对应的补充信息
}
按照这个方式,设置完整的配置项,代码如下:
var options = {
chart: {
type: ''line''
},
title: {
text: ''公交车每站乘客人数''
},
subtitle: {
text: ''临时数据''
},
series: [{
data: [{第一个节点
x: 1,
y: 5,
atime:''7:30''
}, {第二个节点
x: 2,
y: 8,
atime:''7:45''
}, {第三个节点
x: 3,
y: 16,
atime:''8:00''
}, {第四个节点
x: 4,
y: 19,
atime:''8:10''
}, {第五个节点
x: 5,
y: 26,
atime:''8:24''
}, {第六个节点
x: 6,
y: 21,
atime:''8:40''
}, {第七个节点
x: 7,
y: 18,
atime:''8:50''
}, {第八个节点
x: 8,
y: 14,
atime:''9:00''
}, {第九个节点
x: 9,
y: 8,
atime:''9:15''
}, {第十个节点
x: 10,
y: 4,
atime:''9:25''
}],
}],
credits: {
text: ''大学霸'',
href: ''http:daxueba.net''
}
};
执行代码后,效果如图2.1所示。代码中的atime可以用于标签和提示框的显示,这里暂时不做讲解。
图2.1 运行效果
2.2.3 简化为二维数组
采用对象数组的形式,可以明确节点上每个项目的值。但是当节点较多时,会造成大量的冗余代码。如果不写配置项名称,对象数组就可以简化二维数组。形式如下:
data:[
[Number|String , Number , Color , Number|String|Object],
[Number|String , Number , Color , Number|String|Object],
[Number|String , Number , Color , Number|String|Object],
......,
[Number|String , Number , Color , Number|String|Object],
]
这个时候,可以节省很多代码的书写量。但是由于不同的数据列可能包含的项目不同,所以需要让Highcharts能正确识别每个项目的顺序。这个时候,可以采用配置项keys来指定项目顺序。该配置项是series的一个子配置项。其语法如下:
keys:Array
其中,参数Array指定二维数组中每个值所对应的配置项名称。对于刚才的例子,就需要使用keys进行指定,形式如下:
keys:[''x'',''y'',''color'',''hightemtime'']
【实例2-2:carcountone】下面采用二维数组的形式对实例2-1进行简化。代码如下:
var options = {
chart: {
type: ''line''
},
title: {
text: ''公交车每站乘客人数''
},
subtitle: {
text: ''临时数据''
},
series: [{
data: [
[1, 5, ''7:30''],第一个节点
[2, 8, ''7:45''], 第二个节点
[3,16,''8:00''], 第三个节点
[4,19,''8:10''], 第四个节点
[5,26,''8:24''], 第五个节点
[6,21,''8:40''], 第六个节点
[7,18,''8:50''], 第七个节点
[8,14,''9:00''], 第八个节点
[9,8,''9:15''], 第九个节点
[10,4,''9:25''] 第十个节点
],
keys:[''x'',''y'',''atime'']设置节点配置
}],
credits: {
text: ''大学霸'',
href: ''http:daxueba.net''
}
};
执行代码后,还是可以得到图2.1所示的效果。
2.2.4 简化为一维数组
对于一些简单图表类型,在某些情况下,数据还可以进一步简化。但是在简化的时候,必须同时满足以下两个条件:
图表只需要节点的坐标位置数据,就可以实现对应的图表。
各个节点的x轴坐标值是等差数列。
在满足以上条件后,数据就可以简化为一维数组形式,形式如下:
data:[Number, Number, Number,......, Number]
简化后,用户需要指定x轴坐标值的起始值和等差值。这时需要在配置项series中设置配置项pointStart和pointInterval。其语法如下:
poinStart:Number1
pointInterval:Number2
其中,参数Number1指定数据列的第一个节点x的值;参数Number2指定每个节点之间x值的差。
注意:如果数据列节点的x轴无法构成等差数据,则不能进行简化。
【实例2-3:carcounttwo】下面舍弃实例2-2中的atime数据,对图表进行进一步简化。代码如下:
var options = {
chart: {
type: ''line''
},
title: {
text: ''公交车每站乘客人数''
},
subtitle: {
text: ''临时数据''
},
series: [{
data: [5,8,16,19,26,21,18,14,8,4],
}],
credits: {
text: ''大学霸'',
href: ''http:daxueba.net''
}
};
执行代码后,效果如图2.2所示。从图中可以看到,节点对应的x值错了。这是由于没有指定第一个节点的起始x值,所以需要在顶级配置项series添加pointStart和pointInterval的设置。添加后的代码如下:
图2.2 运行效果
series: [{
data: [5, 8, 16, 19, 26, 21, 18, 14, 8, 4],
pointStart: 1,设置起始值
pointInterval:1
}],
再执行代码后,效果如图2.3所示。
图2.3 修正后的运行效果
|