javascript - highcharts 中单独着色的数据范围

Question

我的 highchart 中有一个 columnrange 系列，我希望能够为系列中的每个范围设置特定的颜色。只要我只使用一种颜色，就可以正常工作：

data: [[1, 5, 10], [2, 10, 20]]

这里每个列表中的第一个值是 X，接下来的两个是 Y 范围的开始和结束。为了为每个范围使用单独的颜色，我认为我需要使用“对象表示法”而不是数组表示法，所以我尝试了这个：

data: [{ 
    x: 1,
    y: [5,10],
    fillColor: "red"
},{
    x: 2,
    y: [10,20],
    fillColor: "blue"
}]

然而，这不起作用（得到无效值）。我看不到 API 文档涵盖了这种情况：http: //api.highcharts.com/highcharts#series.data

有谁知道我如何使用对象表示法获得范围（两个 Y 值），或者是否有另一种方法可以对范围进行不同的着色？PS：我的 Y 值实际上是日期范围，但我只是为上面的示例简化了它。

编辑：这是一个 jsfiddle，展示了我试图实现的目标：http: //jsfiddle.net/Q2JMF/1/。如果您将类型更改为“列”，并将 y 值更改为单个整数，您会发现它工作正常。但是使用 columnrange 我无法让它工作。

score 6 · Accepted Answer

正确的选项是lowand high，请参阅：http: //jsfiddle.net/Q2JMF/2/

data: [{ 
  x: 1,
  low: 7,
  high: 8,
  color: "red"
}, {
  x: 2,
  low: 6,
  high: 7,
  color: "blue"
}]

1 回答 1