Highstock | Zooming on xAxis causes Browser Crash

问题

I really don't know what to do anymore. I am developing a highstock chart in my webapplication. the data is loaded correctly but as soon as i enable the zoomType : 'x' in the Chart options i start to get an error at zooming.

I can't reproduce the error properly. But when i try to zoom along the xAxis and select nearly every point which is displayed in the chart it runs and zooms just fine. But when i select a smaller group of points the browser just stops until chrome shuts down. In the task manager i see memory building up to 1GB of RAM usage. i tested it in other browsers and got the same error. I don't handle the events on the xAxis - it's just to zoom in and out. The highstockData.jsp is just a file with many timestamps.

tldr: when i select many points, it goes just fine. when i select just a few points, the browser crashes and memory starts leaking

Update: When i enable the rangeSelector and click on 1m it starts to build up memory too. But when i wait additional minutes ( up to 5 minutes) it loads and the memory starts to go down again.

Update2: I tried debugging it some more. i made a screenshot of the cpu usage profile within chrome after i waited nearly 5 minutes . http://i.imgur.com/xmqhI.png it says that nearly 80% of the cpu usage is used by getnonlineartimeticks.

Solution: Just for the information of others. it's resolved. The problem was the

xAxis : {
     tickInterval : 4
  },

Forcing the xAxis on a small tickInterval caused all the troubles...

here is some code:

function initHighstock() {
options = {
    chart : {
        zoomType : 'x',
        renderTo : 'highstockContainer'
    },
    plotOptions : {
        series : {
            lineWidth : 0,
            marker : {
                enabled : true,
                radius : 3
            },
        }
    },
    navigator : {
        enabled : false
    },
    yAxis : {
        min : 0,
        max : 24,
        tickInterval : 4
    },
    xAxis : {
        tickInterval : 4
    },
    tooltip : {
    shared : false,
        formatter : function() {
            return '<b>' + Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '</b>' + '<br/>' + 'Time of day: '
                    + this.y;
        }
    },
    rangeSelector : {
        enabled : true
    },
    title : {
        text : 'Diary'
    },
    series : []
};

$.get('highstockData.jsp', function(data) {
    // Split the lines
    var lines = data.split(';');
    var series = {
        data : []
    };

    for ( var k = 0; k < lines.length; k++) {
        if (lines[k].length > 0) {
            var line = lines[k];
            var items = line.split(',');

            var myDate = new Date(Math.round(items[0] * 1000));
            series.data.push([ parseInt(Math.round(myDate.getTime())),     parseInt(Math.round(myDate.getHours())) ]);
            myDate = null;
        }
    }
    series.data.sort(function(x, y) {
        return x[0] - y[0];
    });

    options.series.push(series);
    // Create the chart
    var chart1 = new Highcharts.StockChart(options);
    chart1.redraw();

});
};

回答1:

Solution: Just for the information of others. it's resolved. The problem was the:

xAxis : {
 tickInterval : 4
 },

Forcing the xAxis on a small tickInterval caused all the troubles.

回答2:

Please use latest version of Highchart. generally this kind of issue arise because of compact (minified) js file. Use highstock.src.js file instead of highstock.js

来源：https://stackoverflow.com/questions/13557414/highstock-zooming-on-xaxis-causes-browser-crash

标签

javascript

Highcharts

highstock