-2

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

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

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

如果该月的数字 > 98.5，则将点设为绿色，如果该数字在 96 - 98.5 之间，则将点设为琥珀色，任何低于此值的点将点设为红色。

这可能吗？

我尝试将一组颜色返回给我的 ajax 方法并尝试：名称：'生产成功率'，颜色：'responseJSON.colour，类型：'line'，数据：responseJSON.percent

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

然而，颜色 api 似乎不允许数组，因为它只用数组中的第一种颜色为线着色（不幸的是）

谁能帮忙？

4

2 回答 2

3

我相信你想要的是利用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 可能涵盖了您需要的大部分内容。

于 2013-01-31T07:45:38.667 回答
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]        
    }]
});
});

请参阅上面作为如何更改所选标记颜色的示例，如本小提琴所示。您可以按照这些说明自定义颜色。祝你好运！

希望这会有所帮助，瑞秋 :)

于 2013-01-31T07:52:24.910 回答