Highcharts is much slower rendering a chart after

2019-09-10 01:24发布

The page accepts input from user where they paste '|' delimitated data. This data is parsed into a newSeries object. After all the parsing is done the timing to render the graph is almost 15 seconds. However if I copy the exact same newSeries object (using chrome dev tools) and manually define the object the rendering only takes 200ms. Also the interaction of the chart is almost useless after the parsed newSeries object while the manually defined object interacts perfectly.

I really don't understand this. The newSeries object is the exact same in both cases. Is there some caching, or memory fragmentation concept that I'm missing?

Also I tried both the boost.js and the regular highcharts.js and both have similar timings.

Timings from parsed newSeries Object:

:246 Creating chart variable: 0.055ms
:257 Adding series: 0: 12416.308ms
:257 Adding series: 1: 335.028ms
:257 Adding series: 2: 300.123ms
:257 Adding series: 3: 319.647ms
:257 Adding series: 4: 341.969ms
:257 Adding series: 5: 344.129ms
:257 Adding series: 6: 336.129ms
:259 Adding All Chart Objects to Chart: 14393.966ms

Timings from manually defined newSeries:

:1477 Creating chart variable: 0.099ms
:1488 Adding series: 0: 66.618ms
:1488 Adding series: 1: 18.614ms
:1488 Adding series: 2: 22.586ms
:1488 Adding series: 3: 19.240ms
:1488 Adding series: 4: 27.198ms
:1488 Adding series: 5: 24.221ms
:1488 Adding series: 6: 25.175ms
:1490 Adding All Chart Objects to Chart: 204.273ms

Highcharts code:

$('#cpuGraph').highcharts({

        chart: {
            type: 'line',
            zoomType: 'x',
            animation: false,
            shadow: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: false
                },
                animation: false,
                marker: {
                    enabled: false
                }
            }
        },
        tooltip: {
            animation: false,
            crosshairs: true,
            shared: true,
            valueSuffix: '%',
            backgroundColor: null,
            borderWidth: 0,
            shadow: false,
            useHTML: true,
            style: {
                padding: 0
            }
        },
        xAxis: {
            categories: times
        },
        yAxis: {
            max: 100,
            min: 0
        },
        title: {
            text: 'Trimmed Highcharts drawing points'
        },

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

    });

    console.time('Creating chart variable');
    var chart = $('#cpuGraph').highcharts();
    console.timeEnd('Creating chart variable');

    console.time('Adding All Chart Objects to Chart');
    $.each(newSeries, function(i){
        console.time("Adding series: " + i);
        chart.addSeries(newSeries[i]);
        console.timeEnd("Adding series: " + i);
    });
    console.timeEnd('Adding All Chart Objects to Chart');

0条回答
登录 后发表回答