我能够在样条曲线图上更改笔触颜色,但点数和图例不会改变颜色,直到我隐藏并通过单击显示系列然后将鼠标放在每个点之后。
我有一个小提琴: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();
});
});
知道为什么会这样或者解决这个问题吗?
答案 0 :(得分:38)
很简单,你可以使用这段代码
chart.series[0].options.color = "#008800";
chart.series[0].update(chart.series[0].options);
答案 1 :(得分:8)
highcharts论坛上的以下主题有一个解决方案:
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();
});
这显然是一个肮脏的解决方案,但似乎有效。
答案 2 :(得分:5)
你有没看过控制台?
ReferenceError:未定义系列
http://fiddle.jshell.net/J56hm/1/show/
第39行
更改为以下解决了问题
$.each(chart.series[0].data, function(i, point) {
...
}
但现在恰恰相反,当你将鼠标悬停在点上时,它会再次变为蓝色 您正试图通过设置颜色属性来直接操作由highcharts呈现的svg。这不是正确的方法,因为高图可能会根据其渲染算法重绘图表,并且您的所有更改都可能会丢失 说完这一切之后,我仍然不知道在高级图表中有任何支持的方法来做这件事,如果我想出一些东西会更新答案