Highcharts 图表中图例显示状态存储的功能设计

需求背景

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

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

需求方案

方案一

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

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

方案二

使用一个数据库 JSON 类型字段存储图例的是否显示的状态，其结构类似下面这样：

 
{
 
"chart_1":{
 
"legend_1":true,
 
"legend_2":true,
 
"legend_3":true,
 
"legend_4":true,
 
"legend_5":true,
 
"legend_6":true,
 
"legend_7":false,
 
"legend_8":false
 
},
 
"chart_2":{
 
"legend_1":true,
 
"legend_2":true,
 
"legend_3":true,
 
"legend_4":true,
 
"legend_5":true
 
},
 
"chart_3":{
 
"legend_1":true,