HighCharts：一个图例，两个图表答案

【问题标题】：HighCharts: One Legend, Two ChartsHighCharts：一个图例，两个图表
【发布时间】：2014-06-23 13:48:10
【问题描述】：

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

答案：

使用 Paweł FusIn 代码，为了在每个图表上保留图例，我使用了以下代码。您可以单击任何图例项，它会更新所有图表。

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;
}
}
}

【问题讨论】：

这里有一个更新的答案：stackoverflow.com/questions/15926516/…（通过使用 linkedTo 属性。）
我不相信最近的答案实际上解决了这个问题。这个问题是关于两个实际的图表对象以及如何在它们之间共享图例。下面 Paweł Fus 的解决方案仍然很有效。使用linkedTo似乎只会在一个图表中链接两个系列。

标签： javascript highcharts legend

【解决方案1】：

有可能，看看：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]
    }]
});

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

【讨论】：

这在饼图/甜甜圈图上是否同样有效？我遇到了一些问题。
是和不是。我的意思是，这个想法是相同的，但实现有点不同。事件设置在point.events，而不是series.events，每个点都应该有一个ID，而不是系列。另外，使用point.setVisible(vis)，而不是series.show()/hide() 演示：jsfiddle.net/teEQ3/86