高位图表 - 打开和关闭数据

Question

I'm trying to find a way of toggling data on and off in charts using Highcharts. Is there a feature in highcharts library itself that allows this or is it something I would need to do separately?

For instance, in the following example id like to be able to toggle 'delivered' and 'bounced' on or off.

jsfiddle - https://jsfiddle.net/Luo5nfb1/4/

Highcharts.chart('container', {
    chart: {
        type: 'spline'
    },

    legend: {
        symbolWidth: 40
    },

    title: {
        text: 'Trends Over Time'
    },

    yAxis: {
        title: {
            text: 'Number of Clients'
        }
    },

    xAxis: {
        title: {
            text: 'Time'
        },
        categories: ['2020/08/01', '2020/08/07', '2020/08/14', '2020/08/21', '2020/08/28']
    },

    tooltip: {
        valueSuffix: '%'
    },

    plotOptions: {
        series: {
            point: {
                events: {
                    click: function () {
                        window.location.href = this.series.options.website;
                    }
                }
            },
            cursor: 'pointer'
        }
    },

    series: [
        {
            name: 'Attempted',
            data: [400738, 380154, 0, 410846, 402738],
            color: '#3f8ec5'
        }, {
            name: 'Delivered',
            data: [400236, 370436, 0, 400236, 392623],
            color: '#69b051'
        }, {
            name: 'Opened',
            data: [66404, 56204, 0, 63764, 62091],
            color: '#69b051'
        }, {
            name: 'Bounced',
            data: [502, 498, 0, 512, 500],
            color: '#91201a'
        }
    ],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 550
            },
            chartOptions: {
                legend: {
                    itemWidth: 150
                },
                xAxis: {
                    categories: ['2020/08/01', '2020/08/07', '2020/08/14', '2020/08/21', '2020/08/28', '2020/09/04']
                },
                yAxis: {
                    title: {
                        enabled: false
                    },
                    labels: {
                        format: '{value}%'
                    }
                }
            }
        }]
    }
});

Answer 1

Highcharts doesn't offer such kind of a feature, but you should be able to achieve the wanted output by using the linkedTo feature and create a dummy series to keep the legend item for those series and attach them into it or create a custom button to toggle it.

Solution with using the custom button toggling: https://jsfiddle.net/BlackLabel/8tkvad0m/

let btn = document.getElementById("btn");

btn.addEventListener('click', function(){
    chart.series.forEach(s => {
        if(s.name === "Delivered" || s.name === "Bounced") {
            s.visible ? s.hide() : s.show()
        }
    })
})

Solution with using the linkedTo option: https://jsfiddle.net/BlackLabel/mr0q1twb/

API: https://api.highcharts.com/class-reference/Highcharts.Series#show

API: https://api.highcharts.com/highcharts/series.line.linkedTo