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

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

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

范围图 - 图1
图4-10 Highcharts 面积范围图

相关例子：

1、范围图中的数据

范围图可以用数组的形式定义，每个数据点包含三个数据，分别表示 x、y 的最低值、y 的最大值，示例如下：

  1. series: [{
  2.     type: 'arearange',
  3.     data: [
  4.         [0, 2, 4],
  5.         [2, 4, 7]
  6.     ]
  7. }]

另外也可以直接定义成对象的形式，对应的属性名为 low 和 high，示例代码如下：

  1. series: [{
  2.     type: 'areasplinerange',
  3.     data: [
  4.         {
  5.             x:0, 
  6.             low: 2, 
  7.             high: 4
  8.         },
  9.         [2, 4, 7],
  10.         {
  11.             x: 4,
  12.             low: 10,
  13.             high: 20
  14.         }
  15.     ]
  16. }]

对应的在数据提示框或数据标签中，取值是 point.low 和 point.high，示例代码：

  1. tooltip: {
  2.     pointFormat: '数据范围：{point.low} ~ {point.high}'
  3. },
  4. series: [{
  5.     type: 'column',
  6.     data: [],
  7.     dataLabels: {
  8.         enabled: true,
  9.         format: '数据范围：{point.low} ~ {point.high}'
  10.     }
  11. }]

在线试一试

2、范围图中的数据标签

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

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

在线试一试

原文: https://www.hcharts.cn/docs/range-series