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


这篇文章主要介绍“Highcharts图表中图例显示状态存储的功能怎么设计”,在日常操作中,相信很多人在Highcharts图表中图例显示状态存储的功能怎么设计问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Highcharts图表中图例显示状态存储的功能怎么设计”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!公司前端使用 Highcharts 构建图表,图表的图例支持点击显示或隐藏相应的指标。现在有需求后端需要存储用户在前端点击后显示图表的状态,对于已经隐藏的图例相应的指标线下次进入页面后依然隐藏。这样做的目的是简化图表信息和去除免费云主机域名噪音,有些信息对于某些用户来说是不太关心的,用户取消显示它们是合理的。使用数据库枚举值,将图表的存储状态枚举。这是一种实现上比较简单的方案,但是其组合较多,图例越多所需要添加的枚举值就越多,原本的图表状态中有两个图例可以进行此操作,因此使用了这种方案。现在需要将这个功能扩展到 4 个图表,未来又可能扩展到更多图表,所以这种简单的方案已经不适用了。使用一个数据库 JSON 类型字段存储图例的是否显示的状态,其结构类似下面这样:这样使用一个字段将所有图表的图例状态都在一个地方维护,而且避免了过多枚举值的问题。但在实际项目中因为每个用户都有这样一个值需要在数据库中维护,所以它会占用大量的数据库存储空间,在工程质量和未来成本控制上与工程目标不符。对方案二进行改进,存储给每个图表存储一个 int 值,实际这个 int 值可以在代码中转换成二进制,用每个二进制值位的 0 和 1 来标示图例是否该显示。其存储结构如下:同时对于大部分用户而言很可能是不会对默认图表做出更改,那么我们可以在代码中维护一个默认值,当数据库中相应值与默认值一致时,无需实际存储到数据库中,在用户获取信息时直接返回默认值即可。后端使用的是 PHP 的 Laravel 框架,首先在相应的 Model 里我新增了一些类似下面的常量:BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME 维护的是每个图例在 bitmap 中的存储位置,这样在图例增加时只需维护相应的 chart 的存储位置即可,不会影响到其他图表的图例存储。DEFAULT_CHART_LEGEND_VISIBILITIES 定义了图例的默认值,当用户未做更改时可以直接返回其值,在存储时可进行比对,如果值一致就不存储到数据库里了。在定义完这两个常量后,需要做的就是对存储和获取的过程给予相应的处理,Laravel 的 Model 提供了访问器和设置器的功能,我可以利用这个机制对值进行处理,因此我在 model 里新增了以下方法:这样我所要实现的功能基本在这里完成了。现在所要做的就是在控制器里对返回的图表数据的状态进行绑定:$chart_data 传递的是构建好的 Highcharts 需要的数据,这部分可以参考 Highcharts 的文档。这个函数的目的就是将每个图例的数据与我们所维护的图例是否显示的数据绑定,之后再提供修改图例显示状态的 API 即可实现这个功能。到此,关于“Highcharts图表中图例显示状态存储的功能怎么设计”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

相关推荐: Centos6.5怎么安装vsftpd+dhcp+nfs+tftp

这篇文章主要介绍“Centos6.5怎么安装vsftpd+dhcp+nfs+tftp”的相关知识,免费云主机域名小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Centos6.5怎么安装vsftpd+dhcp+nfs+tftp”文章能…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 05/21 18:10
下一篇 05/21 18:23

相关推荐