如何确保Highcharts折线图至少保留一条可见折线（自定义图例）

Hey there! I see you're working on a custom legend for your Highcharts line chart and want to make sure at least one series stays visible no matter what. Let's adjust your click event logic to handle this requirement smoothly.

The Core Idea #

We need to check how many series are currently visible before toggling the clicked one. If only one series is left visible, we'll block the action of hiding it to keep the chart from disappearing.

Modified Code Snippet #

Here's how to update your legend item click handler to add this safeguard:

li.addEventListener('click', function() {
    // Get the chart instance reference
    const chart = this.chart;
    // Count how many series are currently visible
    const visibleSeriesCount = chart.series.filter(series => series.visible).length;

    // Block hiding if this is the last visible series
    if (s.visible && visibleSeriesCount === 1) {
        return; // Exit early, don't allow hiding the last line
    }

    // Proceed with toggling if we pass the check
    const newVisibleState = !s.visible;
    this.setAttribute('data-open', newVisibleState ? "1" : "0"); // Sync legend state with series
    s.setVisible(newVisibleState);
});

Key Changes Explained #

• Count Visible Series: We use chart.series.filter(series => series.visible).length to get the number of currently active lines.
• Block Last Series Hide: If the clicked series is visible and it's the only one left, we exit the function early without changing its visibility.
• Sync Legend State: I adjusted the data-open attribute to toggle based on the actual visibility state (instead of hardcoding to "0")—this keeps your custom legend in sync with the chart's current state.

Full Updated events.load Section #

For full context, here's how the complete load event code will look with the fix:

events: {
    load: function() {
        // legend box
        var div = document.createElement('div');
        div.setAttribute('class', 'legend-box');
        document.getElementsByClassName('chart-indicator-ano')[0].appendChild(div);
        // items
        var ul = document.createElement('ul');
        ul.setAttribute('class', 'item-list');
        div.appendChild(ul);
        const chart = this; // Store chart reference for easy access
        this.series.forEach(function(s,i) {
            var li = document.createElement('li');
            li.setAttribute('class', 'menu-item-' + (i + 1));
            li.style.opacity = 1;
            li.style.color = s.color;
            // Set initial legend state based on series visibility
            li.setAttribute('data-open', s.visible ? "1" : "0");
            ul.appendChild(li);
            var sp = document.createElement('span');
            sp.setAttribute('class', 'hover-item-' + (i + 1));
            li.appendChild(sp);
            li.chart = chart; // Attach chart reference to the li element
            li.addEventListener('click', function() {
                const visibleSeriesCount = chart.series.filter(series => series.visible).length;

                if (s.visible && visibleSeriesCount === 1) {
                    return; // Can't hide the last visible series
                }

                // Toggle visibility and update legend state
                const newVisibleState = !s.visible;
                this.setAttribute('data-open', newVisibleState ? "1" : "0");
                s.setVisible(newVisibleState);
            });
        });
    }
}

This way, your users can toggle all series freely until only one remains—at which point that last line can't be hidden, keeping your chart visible at all times.

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