highcharts 动态控制 legend 选中、隐藏和数据显示

前言

本文主要记录 highcharts 中如何动态控制 legend 选中、隐藏和数据显示。

代码

组件模板代码

<div class="line-chart"></div>

图表初始化

methods: {
    initChart () {
        const self = this
        this.chartRef = Highcharts.chart(this.$el, {
            chart: {
                type: 'spline'
            },
            series: [
                {
                    marker: {
                        enabled: false,
                        radius: 1
                    },
                    data: []
                }
            ]
        })
    }
}

legend 控制

setTimeout(() => {
    // 图例显示/隐藏
    this.chartRef && (this.chartRef.series[index].update({
        // true - 显示，false - 隐藏
        showInLegend: status
    }))

    // series 数据显示
    this.chartRef && (this.chartRef.series[index].show())

    // series 数据隐藏
    this.chartRef && (this.chartRef.series[index].hide())
}, 50)

通过 showInLegend 属性控制 legend 的显示和隐藏。series 的 show/hide 方法控制显隐。