即使在页面刷新时也将选择保留在高图中

Question

我在 UI（HTML 和 JavaScript 页面）generating/showcasing 上使用 highcharts generating/showcasing 图表）

系列部分有多个元素可以select或不select显示在图表上。但是每次刷新后，用户 selected 元素将被取消selected，并且只会出现默认的 selections。并且用户必须再次 select 元素。

有什么解决办法吗？

从图中可以看出问题：

在此，默认情况下A是selected。如果用户 selects Ball 或 C，则 Ball 和 C 的点图也会出现，但一旦图形刷新，图形将只有 A 的点图。

Answer 1

您可以将可见系列状态存储在本地存储中。示例：

const savedStates = localStorage.getItem('seriesStates');
const seriesStates = savedStates ?
    JSON.parse(savedStates) : {
        A: true,
        Ball: false,
        C: false,
        D: false
    };

Highcharts.chart('container', {
    series: [{
        name: 'A',
        data: [1, 2, 3],
        visible: seriesStates.A
    }, {
        name: 'Ball',
        data: [2, 2, 2],
        visible: seriesStates.Ball
    }, {
        name: 'C',
        data: [3, 3, 3],
        visible: seriesStates.C
    }, {
        name: 'D',
        data: [4, 4, 4],
        visible: seriesStates.D
    }],
    plotOptions: {
        series: {
            events: {
                legendItemClick: function() {
                    seriesStates[this.name] = !this.visible;
                    localStorage.setItem(
                        'seriesStates',
                        JSON.stringify(seriesStates)
                    );
                }
            }
        }
    }
});

现场演示： http://jsfiddle.net/BlackLabel/jkuc50Lf/

文档： https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

即使在页面刷新时也将选择保留在高图中

Keep selection in highcharts even on page refresh

html

javascript

css

jquery

highcharts