Highcharts 性能提升模块

Highcharts 性能提升模块(boost.js) 是官方发布的用于提升性能的模块,可以轻松的让 Highcharts 加载十万、百万级的数据,下面是一个 Highcharts 加载 50 万数据的例子:

2017-10016 更新

Boost 模块已经和 Highcharts 6 一起正式发布,并且全部用 WebGL 重写,文件路径及使用方法如下:

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/boost.js"></script>
<!-- 小于 IE11 则用 boost 的 Canvas 版本 -->
<!--[if lt IE 11]>
<script src="https://img.hcharts.cn/highcharts/modules/boost-canvas.js"></script>
<![endif]-->

兼容性:

  • boost 依赖 WebGL,IE 11 以下的浏览器不支持
  • boost-canvas 依赖 Canvas,IE8 以下的浏览器不支持

Highcharts 在处理一定数量的数据(千级,使用分组可以达到万级)时是非常快并且稳定的,但是当数据量达到十万级时,性能就会明显的下降,这是因为 Highcharts 使用的是 SVG 渲染图表,大量的数据也就意味着需要添加绘制大量的 svg 并添加到 DOM。

另外一个导致性能下降的原因是在图表交互中动态渲染大数量数据点、图表重绘、需要处理大量的 JS 对象合并等。

HTML5 Canvas 技术则没有这些限制,但是如果使用纯 Canvas 绘图技术则意味我们需要放弃 SVG 技术的优势,包括直接访问DOM,每个节点都添加和处理事件,跨屏幕的矢量缩放等,因为我们想到的方案是将两者的优势结合在一起。我们尝试过 在 svg 中插入 foreignObject 方案,但是对 IE 支持不好;最终我们的方案是在 canvas 中绘图,然后以 dataURL 图片的形式将 canvas 绘图插入到 SVG 中,这个解决方案运行的结果很好,对性能提升很大。

使用性能提成模块很简单, 只需要额外的引入该模块即可,实例如下:

<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/boost.js"></script>

另外需要注意的是该功能模块还在开发中,并不是最终版本,有任何问题请到我们的社区发帖或到 github 上提交 Bug。

相关例子

分享到评论