Highcharts JQuery – Mudando a Cor de cada Ponto de Ponto

Eu tenho um gráfico de linha que exibe informações variables ​​(% de cada mês nos últimos 12 meses)

Gostaria de alterar a cor do ponto de cada gráfico com base no resultado que recebi de uma chamada do Ajax para a function php. (consulte a linha verde)

Por exemplo, abaixo é meu gráfico: My Graph

se a figura do mês for> 98.5 faça o ponto verde, se a figura estiver entre 96 – 98.5, faça o ponto âmbar e qualquer coisa menor faça o ponto vermelho.

Isso é possível?

Eu tentei retornar uma série de colors de volta ao meu método ajax e tentei: name: ‘Production Success Rate’, cor: ‘responseJSON.colour, type:’ line ‘, data: responseJSON.percent

A resposta da matrizJSON.colour que é retornada é uma matriz de códigos hexadecimais.

No entanto, parece que a cor api não permite uma matriz, pois ele apenas colora a linha com a primeira cor na matriz (desafortunadamente)

Alguém pode ajudar?

Eu acredito que o que você quer é aproveitar o fillColor de cada ponto da série.

Isso pode ser feito construindo manualmente os dados a serem preparados para o gráfico, um exemplo rápido seria:

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

Então, quando você constrói o gráfico, simplesmente forneça data: d e cada um dos pontos terá uma cor de preenchimento diferente com base no condicional acima ...

Eu acho que este jsFiddle provavelmente cobre a maior parte do que você precisa.

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

Veja acima como um exemplo de como alterar a cor do marcador selecionado conforme demonstrado neste violão . você pode personalizar as colors seguindo estas instruções. Boa sorte!

Espero que isso ajude, Rachel 🙂