最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to boost your performance in HighCharts - Stack Overflow

programmeradmin1浏览0评论

Hey I am using highcharts library for introducing graphs of gases.

I want to boost their performance, so that each graph can handle more than 50,000 points per graph.

I know that I can specify turboThreshold to be 1 million and it will works fine,but I have notice a new module called boostjs of HighCharts and I would like to use it, but I don't know how.

This is an example of usage:

$(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=".1.1/jquery.min.js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>

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

Hey I am using highcharts library for introducing graphs of gases.

I want to boost their performance, so that each graph can handle more than 50,000 points per graph.

I know that I can specify turboThreshold to be 1 million and it will works fine,but I have notice a new module called boostjs of HighCharts and I would like to use it, but I don't know how.

This is an example of usage:

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts./highcharts.js"></script>
<script src="https://code.highcharts./modules/boost.js"></script>
<script src="https://code.highcharts./modules/exporting.js"></script>

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

Apparently I don't need to do anything expect adding the script after highchart's script.This is strange , I was sure that I need to add some property to highcharts graph properties to enable this boost mode. I need an explanation on this script and how to use it properly?

Share Improve this question asked Jul 19, 2016 at 13:32 BrkBrk 1,2972 gold badges24 silver badges58 bronze badges 4
  • The short story is just include it and it will work. It seems to just override some default highcharts functions so the boost versions are called instead of the normal ones. I don't understand the specifics of it either. – apokryfos Commented Jul 19, 2016 at 13:40
  • thanks...........................................................we can close this topic. – Brk Commented Jul 19, 2016 at 13:57
  • If you find a more detailed explanation anywhere you could just answer your own question. I'm sure it will help someone else at some point. – apokryfos Commented Jul 19, 2016 at 14:00
  • ok I will :) .... – Brk Commented Jul 19, 2016 at 14:29
Add a ment  | 

1 Answer 1

Reset to default 10

In all SVG based charting solutions including HighCharts, performance decreases after adding a couple hundreds of points to the chart.

The process of adding so much objects (points) to a SVG based chart takes time and user interaction with these objects (like values, titles, tooltips etc.) feels slow. Because there is a limitation of SVG elements which you can add to DOM.

HTML5 canvas technology does not have such limitations. But a pure HTML5 canvas solution lacks of SVGs strength like DOM access, sharp rendering between different screen solutions etc.

So HighCharts engineers made a hybrid solution with using both SVG and HTML5 canvas technologies. They are drawing the graph on a HTML5 canvas then copying the content of the chart to a SVG.

This is how HighChart's boost.js works.

发布评论

评论列表(0)

  1. 暂无评论