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 公交车每站乘客数量数
图表需要展现每站人数的变化。所以，每一行数据是一个节点。其中，站次是节点的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<String>
其中，参数Array<String>指定二维数组中每个值所对应的配置项名称。对于刚才的例子，就需要使用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的设置。添加后的代码如下：
series: [{
data: [5, 8, 16, 19, 26, 21, 18, 14, 8, 4],
pointStart: 1, //设置起始值
pointInterval:1
}],
图2.2 运行效果
再执行代码后，效果如图2.3所示。
图2.3 修正后的运行效果