Highcharts JQuery的 - 改变每个点点的颜色(Highcharts JQuery -

我有一个是（每个月％的数字在过去12个月）显示可变信息的线图

我想改变基础上，我从一个Ajax调用PHP函数收到的结果每个小区的点显色。 （参照绿线）

例如下面是我的图： 我的图

如果数字为一个月> 98.5做出点绿色的，如果这个数字是96之间 - 98.5做出点琥珀色和任何下做出点红。

这可能吗？

我试图返回的颜色数组回到我AJAX方法和尝试：名称：“生产成功率”，颜色：“responseJSON.colour，类型：‘行’，数据：responseJSON.percent

返回的数组responseJSON.colour是十六进制代码的阵列。

然而似乎颜色API不允许的阵列，因为它仅与颜色阵列中的第一颜色的线（不幸的是）

谁能帮助？

Answer 1:

我相信你想要的是充分利用fillColor各系列点。

这可以通过手动构建的图表，以准备数据来完成，一个简单的例子是：

var figures = [93, 95.8, 99.2, 97.8, 98.3, 96.4, 95, 98.9, 97.2, 94.3, 97.1, 94],
        d = [];

$.each(figures, function (i, figure) {
    if (figure > 98.5) {
        d.push({y: figure, fillColor: 'green', color: 'green'});
    }else if(figure < 98.5 && figure > 96.5){
        d.push({y: figure, fillColor: '#ffbf00', color: '#ffbf00'});  //amber i guess
    }else if(figure < 96.5){
        d.push({y: figure, fillColor: 'red', color: 'red'});   
    }
}); 

然后，当你建立图表，只需提供data: d且每个点都将基于上述条件有不同的填充颜色..

我想，这大概的jsfiddle涵盖了大部分的你需要什么。

Answer 2:

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

$(function () {
var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            allowPointSelect: true,
            marker: {
                states: {
                    select: {
                        fillColor: 'red',
                        lineWidth: 0
                    }
                }
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
});
});

见如上面的如在本示范了如何改变所选择的标记颜色的示例小提琴 。 您可以通过以下自定义的颜色，这些指令。 祝好运！

希望这有助于瑞秋:)

文章来源: Highcharts JQuery - Changing the Colour of each Dot Point