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

我正试图找到一种使用Highcharts在图表中打开和关闭数据的方法。highcharts库本身是否有允许此操作的功能，或者我需要单独执行此操作

例如，在下面的示例中，我希望能够打开或关闭“交付”和“反弹”

jsfiddle-

---

Highcharts不提供此类功能，但您应该能够通过使用

链接到

功能来实现所需的输出，并创建一个虚拟系列，以保留这些系列的图例项并将其附加到其中，或者创建一个自定义按钮来切换它

使用自定义按钮切换的解决方案：

使用

链接到

选项的解决方案：

API:

API:

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}%'
                    }
                }
            }
        }]
    }
});

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()
        }
    })
})