Highcharts JQuery的 - 改变每个点点的颜色 [英] Highcharts JQuery - Changing the Colour of each Dot Point

问题描述

我有（每月在过去12个月中％的数字）的线图，其中显示变量信息

I have a line graph that is displaying variable information (% figure each month for the last 12 months)

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

I would like to change the dot colour of each plot based on the result that I recieved from a Ajax call to php function. (refer to the green line)

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

for example below is my graph: My Graph

如果该数字为一个月> 98.5做点绿色的，如果这个数字是在96 - 98.5做出点琥珀和任何降低使点红色

if the figure for the month is > 98.5 make the dot green, If the figure is between 96 - 98.5 make the dot amber and anything lower make the dot red.

这可能吗？

我试图返回的颜色数组回到我的AJAX方法和尝试： 名称：生产成功率，       颜色：responseJSON.colour，       输入：'行'，      数据：responseJSON.percent

i tried returning an array of colours back to my ajax method and tried: name: 'Production Success Rate', color: 'responseJSON.colour, type: 'line', data: responseJSON.percent

返回的数组responseJSON.colour是十六进制codeS的数组。

the array responseJSON.colour that is returned is an array of hex codes.

但似乎色API不允许数组作为其唯​​一的颜色与数组中的第一种颜色（不幸的）

however it seems that the color api does not allow an array as it only colours the line with the first colour in the array (unfortunatly)

谁能帮助？

推荐答案

我相信你想要的是利用填充颜色各系列点。

I believe what you want is to leverage the fillColor of each series point.

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

This can be done by manually building the data that's to be prepared for the chart, a quick example would be:

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

然后当你建立图表，只需提供数据：D 键，每个点都会有基于上述条件不同的填充颜色。

Then when you build the chart, simply supply data: d and each of the dots will have a different fill color based on the above conditional..

我想，这大概的jsfiddle涵盖了大多数你所需要的。

这篇关于Highcharts JQuery的 - 改变每个点点的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！