我想根据平均值或限制值设置高亮度列的颜色。例如,限制值为%20,超过%20的列值将具有红色,或者低于20%的列将具有绿色。
图表显示:
脚本:
function GetEnduktiveKapasitiveValues(type) {
$.ajax({
url: app_base_url + "Reactive/_ReaktiveDaily",
type: 'POST',
data: { branchId: 9, dateMonth: 3, type: type },
success: function (result) {
var list = [];
$.each(result.DateList, function (i, val) {
var value = new Date(parseInt(val.substr(6)));
var month = value.getMonth() + 1;
var ret = value.getDate() + "." + month + "." + value.getFullYear();
list[i] = ret;
});
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Günlük Endüktif - Kapasitif Ceza Limiti Değerleri'
},
subtitle: {
text: ''
},
xAxis: {
categories: list
},
yAxis: {
min: 0,
title: {
text: 'Oran (%)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
borderRadius: 20
},
color : ['#333', '#CB2326', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#CB2326', '#6AF9C4']
},
series: [{
name: result.Name,
data: result.RateList,
type: 'column'
}, {
name: 'Ceza Limiti',
type: 'line',
data: result.Average,
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
});
},
error: function (result) { }
});
}
我希望得到这样的结果:
答案 0 :(得分:4)
data.color
并将其推送到系列数据对象。 示例是一个简单的演示。您需要根据自己的需要进行调整。
答案 1 :(得分:1)
您可以通过指定数据中的颜色来执行此操作。例如来自highcharts的例子:
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, {
y: 216.4,
color: '#BF0B23'
}, 194.1, 95.6, 54.4]