高等级中单独着色的数据范围

时间:2013-03-08 14:52:23

标签: javascript highcharts

我的高图中有一个列范围系列,我希望能够为系列中的每个范围设置特定的颜色。只要我使用一种颜色,这样就可以了:

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,我无法让它工作。

1 个答案:

答案 0 :(得分:6)

正确选项为lowhigh,请参阅:http://jsfiddle.net/Q2JMF/2/

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