Question

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

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);
});

有没有办法可以通过以下方式加快速度：

进行SVG的初始服务器渲染，然后在客户端处理进一步的交互（同构渲染）

或者

使用webworkers进行并行计算，然后渲染图表。

任何帮助，将不胜感激。

Answer 1

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

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

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

Highcharts同构渲染/网络工作者

1 个答案: