Highcharts数据表示(2)
数据节点是图表中最小的元素。每个数据节点都是一个数据单元。它确定了图表中一个图形元素的各种信息。一个数据节点通常包括以下三类信息:
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
- }]
PS:该内容已经加入《网页图表Highcharts实践教程基础篇》v1.2.5。
版权声明:本文为博主原创文章,未经博主允许不得转载。
时间: 2024-10-03 06:02:51