初识HighCharts

HighCharts ( https://www.highcharts.com ) 是一个前端可交互图形控件, 最近学习采用Json数据生成折线图. 图表学习包括2方面:

HighCharts 所要求的数据格式, 这部分可以参考 ( https://api.hcharts.cn/6/highcharts/index.html )里面很全, 本着实用原则需要用到的功能特性就升入学习, 学会了用options.tooltip.crossharirs=true设置了鼠标移到多个折线上显示垂直的动态对齐提示,用option.colors设置很多折线的采用不同颜色. 在实际应用中发现一种的逻辑强, 好维护的开发方式: 根据业务数据的特点编写相关JS数据添加函数, 将业务数据作为参数反复调用.

运行效率方面: 由于HighCharts根据不同浏览器会采用Canvas或SVG技术生成矢量图形, 属于密集的JS运算. 图表不宜太显示数据太多, 首先是避免分散用户精力, 需要明确主题; 其次避免在浏览器渲染和交互时占用太高的CPU.