高亮显示一系列栏中的一个栏？ [英] Highlight one bar in a series in highcharts?

问题描述

我有一张图表显示堆积和分组的条形图，类似于这个演示。

有没有一种方法可以让JavaScript代码突出显示其中一个系列中的某一个？

例如，使用上面链接的演示，在页面的其他地方，用户可以为John选择Pears，并且我希望John的相应Pears栏暂时突出显示

解决方案

您可以使用点更新功能

  var chart = $（'＃container'）。highcharts（）; 
 $（'＃button'）。click（function（）{
 chart.series [0] .data [2] .update（{y：4，color：'yellow'}）; 
}）; 
  

编辑：如果不清楚，您不必设置y值，您可以设置颜色。

  chart.series [0] .data [2] .update（{color：'yellow }）; 
  

http://jsfiddle.net/8vo99a70/

另一个编辑：
一个不重要的按钮：

  $（'＃button2'）。click（function（）{
 chart.series [0] .data [2] .update（{
 color：chart.options.series [0] .color 
}）; 
}）; 
  

http://jsfiddle.net/8vo99a70/4/

I have a chart that is showing a stacked and grouped bar chart, similar to this demo.

Is there a way, from JavaScript code, to cause one of the bars in one of the series to become highlighted?

For instance, using the demo linked above, elsewhere on the page the user might select "Pears" for "John", and I want the corresponding Pears bar for John to be temporarily highlighted in the chart.

解决方案

You can use the Point update function

var chart = $('#container').highcharts();
 $('#button').click(function () {
     chart.series[0].data[2].update({y:4,color:'yellow'});
});

EDIT: In case it isn't clear, you don't have to set the y value, you can set just the color.

chart.series[0].data[2].update({color:'yellow'});

http://jsfiddle.net/8vo99a70/

Another Edit: An unhighlight button:

$('#button2').click(function () {
    chart.series[0].data[2].update({
        color: chart.options.series[0].color
    });
});

http://jsfiddle.net/8vo99a70/4/

这篇关于高亮显示一系列栏中的一个栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！