Highcharts JQuery – 改变每个点的颜色
我有一个显示可变信息的折线图（过去12个月每月的百分比数字）
我想根据我从Ajax调用php函数收到的结果来改变每个图的点颜色。 （参考绿线）
例如下面是我的图表： 我的图表
如果月份的数字> 98.5使点变为绿色，如果数字在96 – 98.5之间，则使点变为琥珀色，任何较低的点使点变为红色。
这可能吗？
我尝试将一系列颜色返回到我的ajax方法并尝试：name：’Production Success Rate’，color：’responseJSON.colour，type：’line’，data：responseJSON.percent
返回的数组responseJSON.colour是hex代码数组。
然而，似乎颜色api不允许数组，因为它只用数组中的第一种颜色着色线（不幸的是）
有人可以帮忙吗？
我相信你想要的是利用每个系列点的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可能涵盖了你需要的大部分内容。
$(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] }] }); });
以上是作为如何更改所选标记颜色的示例，如此小提琴中所示 。 您可以按照这些说明自定义颜色。 祝好运！
希望这有帮助，瑞秋:)