前言
本篇博客是个人日常工作中使用highcharts的笔记总结,纯粹是为了在之后工作中如果再次使用到时能快速上手提高开发效率(不适用于他人)。
注:下面功能的大致思路都是改变图例的配置数据,最后通过highcharts提供的update内置函数来更新并重新渲染图例数据
添加全选、反选功能
1 | events: { |
tooltip数据排序
需求场景:数据较多时,tooltip中显示的数据没有规律很不明朗,数据分析师看着会很费劲,so产品小姐姐就提出了对tooltip数据进行排序的需求
记得当时做这个排序费了半天劲>﹏<,没有思路无从下手
1 | tooltip: { |
坐标轴简单配置
1 | // picData实际的图表配置(形参) |
x轴坐标显示(密度)自适应
需求场景:以折线为例,当x轴坐标的数组长度较大时,但其中某条线的数据坐标较少时(x轴坐标密集),而数据分析师在单独看这条线时为了更直观,所以需要使坐标点更分散点,就需要降低x轴坐标的密度(反之数据多时则需要加大密度)。
1 | let arr = [true, true, true] // 在函数(renderChart)作用域的最上层 |
图例常用配色
1 | // 纯粹个人喜欢 |
折线图完整配置
1 | // 少林功夫好&复制粘贴大法好ヾ(≧▽≦*)o |
性能提升模块
Highcharts 性能提升模块(boost.js) 是官方发布的用于提升性能的模块,可以轻松的让 Highcharts 加载十万、百万级的数据