Highcharts实现点击图例仅显示当前图例其余自动隐藏

Hey there! Let's get this legend behavior working for you. You've got 10 series in your chart, and want clicking the first legend item to hide every other series automatically, leaving only the clicked one visible. Here's a straightforward solution:

Step 1: Override the Legend Click Event for the First Series #

Highcharts lets you customize what happens when a legend item is clicked using the legendItemClick callback on each series. For your first series, we'll replace the default toggle behavior with logic to show only that series and hide all others.

Here's the modified code based on your example (expanded to 10 series for clarity):

$(function() {
    var chart = $('#container').highcharts({
        legend: {
            enabled: true
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [
            {
                name: 'Series 1',
                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],
                // Custom legend click behavior for the first series
                legendItemClick: function() {
                    // Loop through all series in the chart
                    this.chart.series.forEach(function(series) {
                        // Show the clicked series, hide all others
                        if (series === this) {
                            if (!series.visible) series.show();
                        } else {
                            if (series.visible) series.hide();
                        }
                    }, this);
                    // Prevent default Highcharts toggle behavior
                    return false;
                }
            },
            { name: 'Series 2', data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2] },
            { name: 'Series 3', data: [54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6] },
            { name: 'Series 4', data: [95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1] },
            { name: 'Series 5', data: [194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4] },
            { name: 'Series 6', data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5] },
            { name: 'Series 7', data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6] },
            { name: 'Series 8', data: [135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0] },
            { name: 'Series 9', data: [176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0] },
            { name: 'Series 10', data: [144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2] }
        ]
    });
});

Key Details: #

• legendItemClick Callback: This function runs every time the first legend item is clicked.
• Loop Through Series: We iterate over all series in the chart to set their visibility:
  • For the clicked series, we ensure it's visible (in case it was hidden before).
  • For all other series, we ensure they're hidden (if they were showing).
• Return false: This stops Highcharts' default behavior (which toggles only the clicked series on/off).

Bonus: Apply This Behavior to All Legend Items #

If you want any legend item to trigger this "show only me" behavior (not just the first), you can add the callback to all series at once instead of repeating code:

$(function() {
    // Initialize the chart
    var chart = $('#container').highcharts({
        legend: { enabled: true },
        xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] },
        series: [
            // Your 10 series configurations here (same as above, minus the individual legendItemClick)
        ]
    }).highcharts(); // Grab the chart instance

    // Add the custom click event to every series
    chart.series.forEach(function(series) {
        series.legendItemClick = function() {
            chart.series.forEach(function(s) {
                s === this ? (!s.visible && s.show()) : (s.visible && s.hide());
            }, this);
            return false;
        };
    });
});

This way, clicking any legend item will immediately hide all other series and show only the one you clicked—perfect for a 10-series chart where you want to focus on individual data sets quickly.

内容的提问来源于stack exchange，提问作者mankind