javascript highcharts 中的条件标记颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13067685/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
conditional marker colors in highcharts
提问by repincln
I'm using Highcharts and I want to fill markers in line chart with different colors. For example: when variable "a" is 1 then fill marker with red else fill with green. Is it possible to do that?
我正在使用 Highcharts，我想在折线图中填充不同颜色的标记。例如：当变量“a”为 1 时，用红色填充标记，否则用绿色填充。有可能这样做吗？
Here is the code: http://jsfiddle.net/EnyCJ/1/
这是代码：http: //jsfiddle.net/EnyCJ/1/
I was trying to do that with formatter but it doesn't work. Any suggestions?
我试图用格式化程序来做到这一点，但它不起作用。有什么建议？
var a=1;
plotOptions: {
series: {
marker: {
fillColor: {
formatter: function () {
if (a == 1) {
return 'red'
} else {
return 'green'
}
}
},
lineWidth: 2,
}
}
},
回答by Asad Saeeduddin
Try:
尝试：
fillColor: a==1 ? "#ff0000" : "#00ff00"
etc.
等等。
回答by Ivan Nack
You also use zones:
您还可以使用区域：
$(function () {
$('#container').highcharts({
series: [{
data: [-10, -5, 0, 5, 10, 15, 10, 10, 5, 0, -5],
zones: [
{
value: 0,
color: '#f7a35c'
},
{
color: '#90ed7d'
}
]
}]
});
});
回答by Ricardo Alvaro Lohmann
How about removing the logic from your chart and use it only to display data?
如何从图表中删除逻辑并仅将其用于显示数据？
var a = 1,
color = a ? 'red' : 'green';
plotOptions: {
series: {
marker: {
fillColor: color,
lineWidth: 2,
}
}
}
回答by Spencer Sullivan
Expanding upon Asad Saeeduddin's answer:
I am using dataLabels in a doughnut pie chart and the proposed solution was very specific to a singular situation. I wanted to change the label text colors for individual pie slices, based on conditional logic, comparing values.
我在甜甜圈饼图中使用 dataLabels，并且建议的解决方案非常针对单一情况。我想根据条件逻辑，比较值，更改单个饼图的标签文本颜色。
Just sharing because my search brought me here.
只是分享，因为我的搜索把我带到了这里。
data: outerData,
dataLabels: {
formatter:
function () {
if ((outerData[this.point.x].y > innerData[this.point.x].y) && (this.point.x != 0)) {
return this.y > 0.1 ? '<span style="fill: red;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
} else {
return this.y > 0.1 ? '<span style="fill: #006400;">' + this.point.name + ': ' + this.y + '% ' + '</span>' : null;
}
}
}
