解决了highcharts雷达图的自定义注释功能!

520 阅读1分钟

「这是我参与11月更文挑战的第5天,活动详情查看:2021最后一次更文挑战」。

需求方给了一个需求,要给公司的雷达图添加一个指引标识,闪烁一点一点的小手之类的

前言

接到这个需求的我灵机一动,小手闪烁有两种形式,一种是大概在雷达图附近进行动效闪烁,另一种是精确到点位,对对应的雷达点附近进行自己诉求的小手闪烁的效果开发。

需求方:那必须精确到点!

行叭,开始调研

进行中

进入Highcharts官网,打开DEVELOP,下拉进入APIReferance,页面如下

image.png

从上向下先扫视一遍,chart里面第一个是accessbility(可接受性),点进去是一些无障碍的介绍,下一个,annotations(注释),哎?待定。.....下面好像没有了,点击进入annotation,写的很清楚,emmmm

image.png

点击进入示例,basic: jsfiddle.net/gh/get/libr…

示例代码是一个柱形图,定义了annotations,问题来了,此属性可以在雷达图中使用么?继续翻文档,无明显标识。

好的,法无禁令即可为,来,上手撸代码。

准备工作:

先打开一个雷达图代码示例: jshare.com.cn/demos/hhhhi…

再打开一个柱形图代码示例: jshare.com.cn/github/high…

将两者合理组织,得到以下代码示例:jsfiddle.net/4gaLvhk3/21…

哎呀,一不小心上面满足需求了

注:highcharts注释在(0,0)的时候会被遮盖

继续调研:柱形图还有一些新的定为形式,代码如下:jsfiddle.net/gh/get/libr…,你可以用这种形式组织在雷达图里么?欢迎大家前来交流