Highcharts 图表中图例显示状态存储的功能设计详解
作者:麦索 发布时间:2023-05-30 02:01:09
需求背景
公司前端使用 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,
"legend_2":true,
"legend_3":true,
"legend_4":true
},
"chart_3":{
"legend_1":true,
"legend_2":true,
"legend_3":true,
"legend_4":true,
"legend_5":true,
"legend_6":true,
"legend_7":true
}
}
这样使用一个字段将所有图表的图例状态都在一个地方维护,而且避免了过多枚举值的问题。但在实际项目中因为每个用户都有这样一个值需要在数据库中维护,所以它会占用大量的数据库存储空间,在工程质量和未来成本控制上与工程目标不符。
方案三
对方案二进行改进,存储给每个图表存储一个 int 值,实际这个 int 值可以在代码中转换成二进制,用每个二进制值位的 0 和 1 来标示图例是否该显示。其存储结构如下:
{
"chart_1": 15,
"chart_2": 31,
"chart_3": 127,
"chart_3": 252
}
同时对于大部分用户而言很可能是不会对默认图表做出更改,那么我们可以在代码中维护一个默认值,当数据库中相应值与默认值一致时,无需实际存储到数据库中,在用户获取信息时直接返回默认值即可。
代码实现
后端使用的是 PHP 的 Laravel 框架,首先在相应的 Model 里我新增了一些类似下面的常量:
public const BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME = [
'chart_1' => [
'legend_1' => 7,
'legend_2' => 6,
'legend_3' => 5,
'legend_4' => 4,
'legend_5' => 3,
'legend_6' => 2,
'legend_7' => 1,
'legend_8' => 0,
],
'chart_2' => [
'legend_1' => 3,
'legend_2' => 2,
'legend_3' => 1,
'legend_4' => 0,
],
'chart_3' => [
'legend_1' => 6,
'legend_2' => 5,
'legend_3' => 4,
'legend_4' => 3,
'legend_5' => 2,
'legend_6' => 1,
'legend_7' => 0,
],
'chart_4' => [
'legend_1' => 4,
'legend_2' => 3,
'legend_3' => 2,
'legend_4' => 1,
'legend_5' => 0,
],
];
// Each bit of a bitmap is like a bucket, which stores the displayed or hidden state.
public const DEFAULT_CHART_LEGEND_VISIBILITIES = [
'chart_1' => 0b1111,
'chart_2' => 0b11111,
'chart_3' => 0b1111111,
'chart_4' => 0b11111100,
];
BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME 维护的是每个图例在 bitmap 中的存储位置,这样在图例增加时只需维护相应的 chart 的存储位置即可,不会影响到其他图表的图例存储。
DEFAULT_CHART_LEGEND_VISIBILITIES 定义了图例的默认值,当用户未做更改时可以直接返回其值,在存储时可进行比对,如果值一致就不存储到数据库里了。
在定义完这两个常量后,需要做的就是对存储和获取的过程给予相应的处理,Laravel 的 Model 提供了访问器和设置器的功能,我可以利用这个机制对值进行处理,因此我在 model 里新增了以下方法:
/**
* @return array<string,array<string,bool>>
*/
public function getChartLegendVisibilitiesAttribute(?string $value): array
{
$value = $value !== null ? \Safe\json_decode($value, true) : [];
$value += self::DEFAULT_CHART_LEGEND_VISIBILITIES;
$chart_legend_visibilities = [];
/** @var string $chart_name */
foreach ($value as $chart_name => $legend_visibilities_bitmap) {
foreach (self::BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME[$chart_name] as $legend_identifier => $bitmap_index) {
$chart_legend_visibilities[$chart_name][$legend_identifier] = (bool) (($legend_visibilities_bitmap >> $bitmap_index) & 1);
}
}
ksort($chart_legend_visibilities);
return $chart_legend_visibilities;
}
/**
* @param array<string,array<string,bool>>|null $value
*
* @return void
*/
public function setChartLegendVisibilitiesAttribute(?array $value): void
{
if ($value !== null) {
$chart_legend_visibilities = [];
foreach ($value as $chart_name => $legend_visibilities) {
$legend_visibilities_bitmap = 0;
foreach ($legend_visibilities as $legend_identifier => $legend_visibility) {
$bitmap_index = self::BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME[$chart_name][$legend_identifier];
$legend_visibilities_bitmap |= ($legend_visibility & true) << $bitmap_index;
}
if ($legend_visibilities_bitmap !== self::DEFAULT_CHART_LEGEND_VISIBILITIES[$chart_name]) {
$chart_legend_visibilities[$chart_name] = $legend_visibilities_bitmap;
}
}
$value = $chart_legend_visibilities === [] ? null : \Safe\json_encode($chart_legend_visibilities);
}
$this->attributes[self::COLUMN_CHART_LEGEND_VISIBILITIES] = $value;
}
这样我所要实现的功能基本在这里完成了。现在所要做的就是在控制器里对返回的图表数据的状态进行绑定:
/**
* @param array<string,array<int|string,mixed>> $chart_data
* @param \App\Models\UserExtra $user_extra
* @param string $chart_name
*
* @return array<string,array<int|string,mixed>>
*/
private static function getChartLegendVisibility(array $chart_data, UserExtra $user_extra, string $chart_name): array
{
$legend_label_id_by_store_index = array_flip(UserExtra::BITMAP_INDEXES_BY_LEGEND_IDENTIFIER_BY_CHART_NAME[$chart_name]);
$legend_visibilities = $user_extra->chart_legend_visibilities[$chart_name];
foreach ($chart_data['series'] as $series_index => $series) {
$key = array_shift($legend_label_id_by_store_index);
$chart_data['series'][$series_index]['id'] = $key;
$chart_data['series'][$series_index]['visible'] = $legend_visibilities[$key];
}
return $chart_data;
}
$chart_data 传递的是构建好的 Highcharts 需要的数据,这部分可以参考 Highcharts 的文档。这个函数的目的就是将每个图例的数据与我们所维护的图例是否显示的数据绑定,之后再提供修改图例显示状态的 API 即可实现这个功能。
来源:https://juejin.cn/post/7209950095403909176
猜你喜欢
- 测试把txt文件导入至mysql数据库中: table: txt文件:D:/data.txt (txt文件下载)txt中使用 '\N
- JavaScript 中的并没有提供像 VBScript 里的 DateAdd 方法用于日
- python 代码如下:# -*- coding:utf-8 -*-import pandas as pdimport pymysqlimp
- 1. 区分读锁定 和 写 锁定。 如果每次都使用 写锁定,那么连多个进程读取一个文件也要排队,这样的效率肯定不行。 2. 区分 阻塞 与 非
- 用Matplotlib画三维图最基本的三维图是由(x, y, z)三维坐标点构成的线图与散点图,可以用ax.plot3D和ax.scatte
- 学习JQUERY就应该从最基本的学起,基本的就应该是语法了,在这里,我们有必要先温习一下JAVASCRIPT的一些知识。语法就不用说了,都是
- 子组件监听父组件值变化子组件中利用watch监听父组件值的变化// 子组件props: ["a"], &nbs
- <% Function FileCounter(counter_file) Dim fs,txt,fi
- 引言“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建类
- 当Django的内置权限无法满足需求的时候就自己扩展吧~背景介绍overmind项目使用了Django内置的权限系统,Django内置权限系
- 目的:在help(模块名)时,能够看见文件里面的注释。首先,在文件的最开头,如果有个多行注释(三引号),就会将注释写入__DOC__变量,在
- 本文实例讲述了Python实现新浪博客备份的方法。分享给大家供大家参考,具体如下:Python2.7.2版本实现,推荐在IDE中运行。# -
- 配置数据库密码特殊字符报错一般的springboot项目会有application.yml或者application.properties文
- 前言本人做SSM项目的时候,在做删除功能时,发现找不到字段,在搜索了各种博客之后终于找到了解决办法一、报错Unknown column &a
- 不知道大家在做页面的时候会不会遇到样式定义不生效的问题,基本的表现就是怎么改样式都没显示或只有某些浏览器正常,这时通常需要做下面的几步:确认
- 简介Closure所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭
- 什么是组播点对点连接可以处理很多通信需求,不过随着直接连接数的增加,在多对通信方之间传递相同的消息会变得越来越困难。单独地向各个接收方发送消
- 本篇文章面向的读者: 已经基本掌握Go中的 协程(goroutine),通道(channel),互斥锁(sync.Mutex),读
- 前言我们这里主要是利用requests模块和bs4模块进行简单的爬虫的讲解,让大家可以对爬虫有了初步的认识,我们通过爬几个简单网站,让大家循
- 有时,我们需要获得某张表所有的元数据,我们可能想到的是通过查询系统表获得,但是这比较繁琐,而在SQL Server2005(包含)以后,提供