Javascript 动态更改 highcharts 中的系列颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12419758/
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
Changing series color in highcharts dynamically
提问by Soliah
I have been able to change the stroke color on a spline graph, but the points and the legend do not change color until after I hide and show the series by clicking it and then mousing over each of the points.
我已经能够更改样条图上的笔触颜色，但点和图例不会改变颜色，直到我通过单击它然后将鼠标悬停在每个点上来隐藏和显示系列之后。
I have a fiddle here: http://jsfiddle.net/J56hm/2/
我在这里有一个小提琴：http: //jsfiddle.net/J56hm/2/
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
});
// the button handler
$('#button').click(function() {
chart.series[0].color = "#FF0000";
chart.series[0].graph.attr({ stroke: '#FF0000' });
$.each(chart.series[0].data, function(i, point) {
point.graphic.attr({ fill: '#FF0000' });
});
chart.series[0].redraw();
chart.redraw();
});
});?
Any idea why this is happening or a way to work around this?
知道为什么会发生这种情况或解决此问题的方法吗？
采纳答案by Soliah
The following thread on the highcharts forum has a solution:
highcharts 论坛上的以下主题有一个解决方案：
http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437with a fiddle http://jsfiddle.net/G5Pk7/that illustrates it.
http://highslide.com/forum/viewtopic.php?f=9&t=7075&p=33437用一个小提琴http://jsfiddle.net/G5Pk7/来说明它。
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
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]
}]
});
$('#button').click(function() {
var series = chart.series[0];
series.color = "#FF00FF";
series.graph.attr({
stroke: '#FF00FF'
});
chart.legend.colorizeItem(series, series.visible);
$.each(series.data, function(i, point) {
point.graphic.attr({
fill: '#FF00FF'
});
});
series.redraw();
});
This is clearly a dirty solution, but seems to work.
这显然是一个肮脏的解决方案，但似乎有效。
回答by Duc Anh Nguyen
it's simple, you can use this code
很简单，你可以使用这个代码
chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);
回答by Jugal Thakkar
Did you even look at the console?
你有没有看控制台？
ReferenceError: series is not defined
http://fiddle.jshell.net/J56hm/1/show/
Line 39
ReferenceError: 系列未定义
http://fiddle.jshell.net/J56hm/1/show/
第 39 行
Changing into to following solved the issue
更改为以下解决了问题
$.each(chart.series[0].data, function(i, point) {
...
}
But now the opposite happens, when you hover over the points it goes blue again
You are trying to directly manipulate the svg that is rendered by highcharts by setting color attributes. This isn't the correct way, as highchart may redraw the chart based on its rendering algorithm and all your changes may be lost.
After having said all that, I still don't know any supported method in highcharts to do this, will update the answer if I come up with something
但是现在相反的情况发生了，当您将鼠标悬停在这些点上时，它再次变为蓝色您正试图通过设置颜色属性来直接操作由 highcharts 呈现的 svg。这不是正确的方法，因为 highchart 可能会根据其渲染算法重新绘制图表，并且您的所有更改可能会丢失。
说了这么多之后，我仍然不知道 highcharts 中有任何支持的方法可以做到这一点，如果我想出什么，我会更新答案
