Highcharts图表如何实现图例状态存储功能详解？

本文共计1550个文字，预计阅读时间需要7分钟。

目录需求背景需求方案方案一方案二方案三代码实现需求背景需求前端使用Highcharts构建图表图表示例支持点击显示或隐藏相关指标

目录

• 需求背景
• 需求方案
• 方案一
• 方案二
• 方案三
• 代码实现

需求背景

公司前端使用 Highcharts 构建图表，图表的图例支持点击显示或隐藏相应的指标。现在有需求后端需要存储用户在前端点击后显示图表的状态，对于已经隐藏的图例相应的指标线下次进入页面后依然隐藏。

这样做的目的是简化图表信息和去除噪音，有些信息对于某些用户来说是不太关心的，用户取消显示它们是合理的。

需求方案

方案一

使用数据库枚举值，将图表的存储状态枚举。这是一种实现上比较简单的方案，但是其组合较多，图例越多所需要添加的枚举值就越多，原本的图表状态中有两个图例可以进行此操作，因此使用了这种方案。

现在需要将这个功能扩展到 4 个图表，未来又可能扩展到更多图表，所以这种简单的方案已经不适用了。