Question

我有一个显示变量信息的折线图（过去12个月每个月的百分比数字）

我想根据我从Ajax调用php函数收到的结果来更改每个绘图的点颜色。（参见绿线）

以下是我的图表： My Graph

如果月份的数字是＆gt; 98.5使点变绿，如果图形在96 - 98.5之间，则使点变为琥珀色，任何较低的点使点变为红色。

这可能吗？

我尝试将一组颜色返回到我的ajax方法并尝试：名称：'生产成功率'，颜色：'responseJSON.colour，类型：'line'， data：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，每个点将根据上述条件具有不同的填充颜色。

I think this jsFiddle probably covers most of what you need.

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]        
    }]
});
});

请参阅上面的示例，了解如何更改所选标记颜色，如fiddle所示。您可以按照these说明自定义颜色。祝好运！

希望这有帮助，Rachel：）

Highcharts JQuery - 改变每个点的颜色

2 个答案: