根据值设置Highcharts系列条的颜色

时间:2015-05-13 20:35:50

标签: javascript css angularjs highcharts

我有this plunker我正在玩Highcharts。我想知道是否可以根据该条的值设置条形的颜色。现在我有5个条形在0到100之间的间隔变化,我想要条形的颜色反映它们所在的数字范围。喜欢

0 < x < 25为中性色

25 < x < 50为黄色

50 < x < 75是橙色

75 < x < 100为红色

我熟悉api中的系列方法,但我真的没有看到有关改变系列颜色的任何内容。我以前使用图表js完成了这个,但我正在尝试使用高级图表,因为它使用得更多。

2 个答案:

答案 0 :(得分:1)

在随机化数据集之后,在间隔的底部,我将它放在您的plunker链接中,并且它改变了线条颜色

$scope.chart.series[0].update( {color: "red"} );

老实说,为什么不编写一个在生成数字的间隔开始时触发的函数以及基于数字的相关颜色,然后相应地设置数字和颜色。使用一组对象或其他东西。

我将这个功能作为练习让你解决。

答案 1 :(得分:0)

在通过ajax调用返回的系列数组中,您可以设置一个“颜色”属性,将该颜色设置为该颜色。

在您的plunker中,我在template<typename T> T* MakeNewCopy(void* p) { return new T(*static_cast<T*>(p)); } auto p = MakeNewCopy<descriptor_t>(FunctionToReturnPointer()); 之后添加了以下行:

$scope.jsondata = ret;

这确实将酒吧改为红色。所以你可以在服务器端执行它并将它返回给你的JS,或者在HighChart中设置系列之前,你可以调用一个简单的方法来检查值并设置颜色属性。