高位图表更改水平条的颜色

Question

我有一个类似的图表：

http://jsfiddle.net/9b6tvoo3/796/

// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'SOTMP Checklist Compliance History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,            
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
},
/* formatter: function() {
if (tasks[this.value]) {
return tasks[this.value].name;
}
}*/
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});        

我需要将第一个类别3条的颜色改为红色，并保持第二个黄色，对其他有多个水平条的类别也要这样做。

我应该做什么配置？

同一类别的条形图需要有不同的颜色。

感谢关注

Answer 1

您可以使用多色系列插件(使用此插件，无需将同一类别中的点放在不同系列中(：

http://blacklabel.github.io/multicolor_series/

https://www.highcharts.com/products/plugin-registry/single/33/Multicolor%20series

---

你可以用这种方式给你的点上色：

series[6].data[0].segmentColor = 'blue'

但你必须添加多色系列模块：

<script src="https://blacklabel.github.io/multicolor_series/js/multicolor_series.js"></script>

并将您的图表类型更改为彩色线：

chart: {
renderTo: 'container',
type: 'coloredline'
},

举一个例子：https://jsfiddle.net/BlackLabel/bavm762o/

以及您的图表：http://jsfiddle.net/BlackLabel/0fudaovy/

Answer 2

您可以将带有两个点的每条单独的线视为一个系列，这将允许您轻松设置颜色：

var series = [];
$.each(tasks.reverse(), function(i, task) {
$.each(task.intervals, function(j, interval) {
var item = {
name: task.name,
color: interval.color
};
item.data = [{
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
}];
series.push(item);
});
});

现场演示：http://jsfiddle.net/BlackLabel/mdkvsj6n/

API参考：https://api.highcharts.com/highcharts/series.line.color