Question

在highcharts初始化中，我只设置了一种颜色的数组。我想用图表的悬停事件中的另一个数组来改变它。换句话说，图表是默认的单色，悬停后它变得丰富多彩。

config = {
    colors: ["#C0C0C0"]
};

chart = $('#chart').highcharts(config).highcharts()

$('#chart').hover(function(){
    chart.options.colors = ["#E84C3D", "#C1392B", '#D25400', "#E67F22", "#F39C11"]
}, function(){
    chart.options.colors = ["#C0C0C0"]
});

不幸的是它不起作用。我该怎么办？

Answer 1

您可以设置plotOptions事件：

plotOptions: { column:{colorByPoint:true}, series: { animation:false, events: { mouseOver: function(e) { //console.log( chart.options); var options = chart.options; if(options.colors[0]!='#E84C3D') { options.colors=['#E84C3D','#C1392B','#D25400','#E67F22','#F39C11']; chart = new Highcharts.Chart(options); } }, mouseOut: function(e) { var options = chart.options; if(options.colors[0]!='#C0C0C0') { options.colors=['#C0C0C0']; chart = new Highcharts.Chart(options); } } } } }

demo http://jsfiddle.net/eNMvw/134/

Answer 2

不是多次创建图表，而是更好地使用series.update()并按条形图应用颜色。

如何以编程方式更改Highcharts中的颜色选项？

2 个答案: