HighCharts: 一个图例，两个图表

Question

HighCharts: 一个图例，两个图表

3

我有四个不同的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;
}
}
}

- user3767675

这里有一个更新的答案：https://dev59.com/63DYa4cB1Zd3GeqPD8O4 （通过使用linkedTo属性。） - Kev

我不认为最近的答案实际上解决了这个问题。这个问题涉及到两个实际的图表对象以及如何在它们之间共享一个图例。Paweł Fus在下面提供的解决方案仍然非常有效。使用linkedTo似乎只能链接单个图表中的两个系列。 - Pez

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paweł Fus · Accepted Answer

可以的，看一下这个链接：http://jsfiddle.net/teEQ3/。这是关于it技术的内容。

$('#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]
    }]
});

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