HighCharts:一个传奇，两个图表

HighCharts: One Legend, Two Charts

本文关键字：两个 一个 HighCharts 传奇      更新时间：2023-09-26

我有四个不同的HighChart样条图它们都包含六个系列，代表新英格兰的六个州。我想点击任何图例，在所有图表中隐藏/显示该系列。我试过legendclickitem，但不能让它影响两个图表。我想问的是可能的，如果可以的话，你能给我指出正确的方向吗，谢谢。

答:

使用paweowfusin代码，为了在每个图表上保持一个图例，我使用了以下代码。你可以点击任何图例项，它就会更新所有的图表。

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

这是可能的，看看: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]
    }]
});

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

相关文章：