HighCharts：一个传奇，两个图表 [英] HighCharts: One Legend, Two Charts

问题描述

我有四个不同的HighChart样条图。全部包含代表六个新英格兰国家的系列。我想单击任何图例并在所有图表中隐藏/显示该系列。我曾尝试过legendclickitem，但无法让它实现两个图表。是我问的可能，如果是这样，你可以指出我在正确的方向，谢谢。

答案：

使用PawełFusIn代码并为了保留每个图表上的图例，我使用了下面的代码。您可以点击任何图例项目并更新所有图表。

  plotOptions：{
系列：{
事件：{
 legendItemClick：function（event）{
 if（this.visible）{
 $（'＃container1'）。highcharts（）。series [this.index] .hide （）; 
 $（'＃container2'）。highcharts（）。series [this.index] .hide（）; 
 $（'＃container3'）。highcharts（）。series [this.index] .hide（）; 
 $（'＃container4'）。highcharts（）。series [this.index] .hide（）; 
} 
 else {
 $（'＃container1'）。highcharts（）。series [this.index] .show（）; 
 $（'＃container2'）。highcharts（）。series [this.index] .show（）; 
 $（'＃container3'）。highcharts（）。series [this.index] .show（）; 
 $（'＃container4'）。highcharts（）。series [this.index] .show（）; 
} 
返回false; 
 
 
 
  

解决方案

有可能，请看一下： http://jsfiddle.net/teEQ3/

  $（'＃container1'）。highcharts（{
 xAxis：{
 categories：['Jan'， 'Feb'，'Mar'，'Apr'，'May'，'Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}， 
 
传说：{
启用：false 
}，
 
系列：[{
 id：'someId'，
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4] 
}] 
}）; 
 $（'＃container2'）。highcharts（{
 xAxis：{
 categories：['Jan'，'Feb'，'Mar'，'Apr'，'May'，' Jun'，'Jul'，'Aug'，'Sep'，'Oct'，'Nov'，'Dec'] 
}，
 
 plotOptions：{
 series： {
 events：{
 legendItemClick：function（event）{
 var XYZ = $（'＃container1'）。highcharts（），
 series = XYZ.get（this。 options.id）; //获取相应的系列
 
 if（系列）{
 if（this.visible）{
 series.hide（）; 
} else {
 series.show（）; 
} 
} 
} 
} 
} 
}，
 
系列：[{
 id：'someId'，
 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] 
}] 
}）; 
  

所以这个想法是只在一个图表图例中启用，然后在所有相应的图表中隐藏相应的系列。

I have four different HighChart spline charts. All contain six series representing the six New England states. I want to click any legend and hide/show that series in all charts. I have tried legendclickitem but cannot get it to effect both charts. Is what i am asking possible, if so can you point me in the right direction, thanks.

Answer:

Using Paweł FusIn code and in order to keep a legend on each chart I used the following code. You can click on any legend item and it updates all charts.

plotOptions: {
series: {
events: {
legendItemClick: function(event) {
if (this.visible) {
$('#container1').highcharts().series[this.index].hide(); 
$('#container2').highcharts().series[this.index].hide(); 
$('#container3').highcharts().series[this.index].hide(); 
$('#container4').highcharts().series[this.index].hide(); 
} 
else {
$('#container1').highcharts().series[this.index].show(); 
$('#container2').highcharts().series[this.index].show(); 
$('#container3').highcharts().series[this.index].show(); 
$('#container4').highcharts().series[this.index].show();
}
return false;
}
}
}

解决方案

It's possible, take a look: http://jsfiddle.net/teEQ3/

$('#container1').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    legend: {
        enabled: false
    },

    series: [{
        id: 'someId',
        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]
    }]
});
$('#container2').highcharts({
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (event) {
                    var XYZ = $('#container1').highcharts(),
                        series = XYZ.get(this.options.id); //get corresponding series

                    if (series) {
                        if (this.visible) {
                            series.hide();
                        } else {
                            series.show();
                        }
                    }
                }
            }
        }
    },

    series: [{
        id: 'someId',
        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]
    }]
});

So the idea is to enable only in one chart legend, then in all respective charts hide corresponding series.

这篇关于HighCharts：一个传奇，两个图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！