如何在HighCharts中提升您的表现

Question

嘿我正在使用highcharts库来引入气体图.

我想提高它们的性能,这样每个图形可以处理每个图形超过50,000个点.

我知道我可以指定turboThreshold为100万,它会正常工作,但我注意到一个名为boostJs of HighCharts的新模块,我想用它,但我不知道如何.

这是一个用法示例:

$(function () {

    function getData(n) {
        var arr = [],
            i,
            a,
            b,
            c,
            spike;
        for (i = 0; i < n; i = i + 1) {
            if (i % 100 === 0) {
                a = 2 * Math.random();
            }
            if (i % 1000 === 0) {
                b = 2 * Math.random();
            }
            if (i % 10000 === 0) {
                c = 2 * Math.random();
            }
            if (i % 50000 === 0) {
                spike = 10;
            } else {
                spike = 0;
            }
            arr.push([
                i,
                2 * Math.sin(i / 100) + a + b + c + spike + Math.random()
            ]);
        }
        return arr;
    }
    var n = 500000,
        data = getData(n);


    console.time('line');
    $('#container').highcharts({

        chart: {
            zoomType: 'x'
        },

        title: {
            text: 'Trimmed Highcharts drawing ' + n + ' points'
        },

        subtitle: {
            text: 'Using the experimental Highcharts Boost module'
        },

        tooltip: {
            valueDecimals: 2
        },

        series: [{
            data: data,
            lineWidth: 0.5
        }]

    });
    console.timeEnd('line');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px; max-width: 800px; margin: 0 auto"></div>

显然我不需要做任何事情,希望在highchart脚本之后添加脚本.这很奇怪,我确信我需要在highcharts图形属性中添加一些属性来启用此增强模式.我需要对此脚本的解释以及如何正确使用它？

Answer 1

在包括HighCharts在内的所有基于SVG的图表解决方案中,在向图表添加几百个点后性能会下降.

将如此多的对象(点)添加到基于SVG的图表的过程需要时间,并且用户与这些对象的交互(如值,标题,工具提示等)感觉很慢.因为您可以添加到DOM中的SVG元素存在限制.

HTML5 canvas技术没有这样的限制.但纯HTML5画布解决方案缺乏像DOM访问这样的SVG强度,不同屏幕解决方案之间的清晰渲染等.

因此,HighCharts工程师使用SVG和HTML5画布技术制作了混合解决方案.他们在HTML5画布上绘制图形,然后将图表的内容复制到SVG.

这就是HighChart的boost.js的工作原理.