fHighcharts同构渲染/网络工作者

Question

我们有一个应用程序可同时在仪表板上呈现〜50（高）图表。事情是当图表渲染时浏览器冻结。 （我尝试使用boost和虚拟滚动）。更糟的是，我们的用户通常会打开数据标签。

与实验小提琴：http://jsfiddle.net/z9msdftt/1/

var to; 
$('#charts').scroll((e) => { 
    clearTimeout(to); 
     to = setTimeout(() => { 
     var offset = Math.floor($('#charts').scrollTop()/400); 
     var start = new Date(); 
     [...Array(5)].forEach((_, i) => { 
      renderChart(offset + i); 
     }); 
     var end = new Date(); 
     $('#counter').html('Time rendering: ' + (end - start) + 'ms'); 
    }, 50); 
}); 

有没有一种方法，我可以加快这也许是：

1. 做了SVG的初始服务器渲染，然后把手上的进一步交流客户端（同构渲染）

或

1. 使用webworkers并行执行计算，然后渲染图表。

任何帮助，将不胜感激。

Answer 1

您可以尝试Highcharts boost.js以加快渲染过程。

这个速度问题在所有基于SVG的图表库中都很常见。将几百个点添加到图表或将多个图表添加到同一页面之后，性能会下降。

boost.js通过在HTML5画布上绘制图形然后将图表内容复制到SVG来使用HTML5画布技术。