范围图

范围图包括面积范围图、曲线面积范围图及柱形范围图，另外通过设置 chart.inverted 可将范围柱状图变成范围条形图。

范围图在使用时需要额外引入 highcharts-more.js

<script src="http://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>

图4-10 Highcharts 面积范围图

相关例子：

• 面积范围均线图
• 面积范围图
• 柱形范围图

一、特性

1、范围图中的数据

范围图可以用数组的形式定义，每个数据点包含三个数据，分别表示 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}'
    }
}]

在线试一试

2、范围图中的数据标签

由于范围图中每个数据点有两个值，对应的数据标签也会有两个，在某些需求中，我们往往需要对这两个标签进行区别显示，包括颜色设定，偏移设定等。

在范围图中，数据点包含变量 below，用于标识是否是低值数据点，通过这个变量我们可以灵活的控制数据标签或提示框的表现，另外对于数据标签，还可以通过 xLow、xHigh、yLow 、yHigh 来控制其偏移。

在线试一试