如何在页面刷新时保留Highcharts中用户选中的series序列展示状态

问题背景 #

在HTML + JavaScript开发的UI页面中使用Highcharts生成图表时，series对应的图例支持用户手动勾选控制显隐，但页面刷新后用户的勾选状态会被重置为默认值，需要重复操作。

核心思路 #

将用户的勾选状态持久化存储，页面初始化图表时读取存储的状态覆盖默认配置，用户修改勾选状态时同步更新存储内容。

具体实现步骤 #

• 第一步：监听图例点击事件，同步存储状态
  利用Highcharts原生的legendItemClick事件，用户点击图例修改显隐时，将所有序列的可见状态存储到本地存储中：

  Highcharts.chart('container', {
    // 其他图表配置...
    plotOptions: {
      series: {
        events: {
          legendItemClick: function () {
            // 计算点击后当前序列的最新可见状态
            const currentNewVisibility = !this.visible;
            // 收集所有序列的可见状态
            const statusList = this.chart.series.map(series => ({
              id: series.name, // 用唯一标识匹配序列，name不唯一可换为自定义的series.id
              visible: series.name === this.name ? currentNewVisibility : series.visible
            }));
            // 存入localStorage，key可自定义，避免和其他业务存储冲突
            localStorage.setItem('chart_series_visibility', JSON.stringify(statusList));
          }
        }
      }
    },
    series: [...]
  });
  

• 第二步：图表初始化前读取存储的状态，覆盖默认配置
  页面加载初始化图表之前，先读取本地存储的状态，修改series的默认可见属性：

  // 读取存储的状态
  const savedStatus = localStorage.getItem('chart_series_visibility');
  const statusMap = savedStatus ? new Map(JSON.parse(savedStatus).map(item => [item.id, item.visible])) : new Map();
  
  // 你的原始series配置
  const originalSeries = [
    {name: 'A', data: [1,2,3], visible: true},
    {name: 'Ball', data: [2,3,4], visible: false},
    {name: 'C', data: [3,4,5], visible: false}
  ];
  
  // 用存储的状态覆盖默认配置
  const finalSeries = originalSeries.map(series => {
    if (statusMap.has(series.name)) {
      series.visible = statusMap.get(series.name);
    }
    return series;
  });
  
  // 初始化图表时传入处理后的finalSeries
  Highcharts.chart('container', {
    // 其他配置...
    series: finalSeries
  });
  

可选优化方案 #

• 如果需要区分同一站点下多个图表的状态，存储的localStorage的key可以加上图表唯一ID或者页面路径，避免状态冲突。
• 如果希望状态仅在当前会话生效，关闭浏览器就自动清空，可以将localStorage替换为sessionStorage。
• 如果需要跨设备同步状态或者永久保存，可以将状态上传到后端用户数据库存储，页面初始化时请求接口拉取状态即可。
• 如果需要支持分享当前选中状态给其他用户，可以将状态序列化后放到URL的query参数中，页面加载时解析query参数生成配置，分享链接打开后会自动还原选中状态。

注意事项 #

用于匹配序列的唯一标识（上述示例用的是series.name）必须全局唯一，否则会出现状态匹配错误的问题，如果name存在重复的情况，可以给每个series设置独立的id字段，用id作为匹配标识。

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