第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 修正后的运行效果
|
購物車/收銀台(
0
) | 在線留言板
| 付款方式
| 聯絡我們
| 運費計算
| 幫助中心 |
加入書簽
HOME
新書上架
