最后修改时间:2017-03-20 21:02
范围图包括面积范围图、曲线面积范围图及柱形范围图,另外通过设置 chart.inverted
可将范围柱状图变成范围条形图。
范围图在使用时需要额外引入 highcharts-more.js
<script src="http://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
图4-10 Highcharts 面积范围图
相关例子:
范围图可以用数组的形式定义,每个数据点包含三个数据,分别表示 x、y 的最低值、y 的最大值,示例如下:
series: [{
type: 'arearange',
data: [
[0, 2, 4],
[2, 4, 7]
]
}]
另外也可以直接定义成对象的形式,对应的属性名为 low
和 high
,示例代码如下:
series: [{
type: 'areasplinerange',
data: [
{
x:0,
low: 2,
high: 4
},
[2, 4, 7],
{
x: 4,
low: 10,
high: 20
}
]
}]
对应的在数据提示框或数据标签中,取值是 point.low
和 point.high
,示例代码:
tooltip: {
pointFormat: '数据范围:{point.low} ~ {point.high}'
},
series: [{
type: 'column',
data: [],
dataLabels: {
enabled: true,
format: '数据范围:{point.low} ~ {point.high}'
}
}]
由于范围图中每个数据点有两个值,对应的数据标签也会有两个,在某些需求中,我们往往需要对这两个标签进行区别显示,包括颜色设定,偏移设定等。
在范围图中,数据点包含变量 below
,用于标识是否是低值数据点,通过这个变量我们可以灵活的控制数据标签或提示框的表现,另外对于数据标签,还可以通过 xLow
、xHigh
、yLow
、yHigh
来控制其偏移。
本教程仅用于学习、研究和交流目的,欢迎非商业转载。转载请注明出处及完整的链接。
订阅更新