Highstock | Le zoom sur xAxis provoque un plantage du navigateur

Question

Je ne sais vraiment plus quoi faire. Je développe un graphique de highstock dans mon application Web. Les données sont chargées correctement, mais dès que j'active le zoomType: 'x' dans les options du graphique, je commence à avoir une erreur de zoom.

Je ne peux pas reproduire correctement l'erreur. Mais quand j'essaie de zoomer le long de l'xAxis et de sélectionner presque tous les points qui sont affichés dans le graphique, il s'exécute et effectue des zooms très bien. Mais quand je sélectionne un plus petit groupe de points, le navigateur s'arrête juste jusqu'à ce que le chrome s'arrête. Dans le gestionnaire de tâches, je vois la mémoire accumuler jusqu'à 1 Go d'utilisation de la RAM. Je l'ai testé dans d'autres navigateurs et j'ai eu la même erreur. Je ne gère pas les événements sur le xAxis - c'est juste pour zoomer et dézoomer. Le highstockData.jsp est juste un fichier avec beaucoup d'horodatages. Tldr: quand je sélectionne plusieurs points, ça va très bien. lorsque je sélectionne seulement quelques points, les accidents de navigateur et de la mémoire commence à fuir

Mise à jour: Quand je l'activer rangeSelector et cliquez sur 1m, il commence à accumuler trop de mémoire. Mais quand j'attends des minutes supplémentaires (jusqu'à 5 minutes) il charge et la mémoire commence à redescendre.

Update2: J'ai essayé de le déboguer un peu plus. J'ai fait une capture d'écran du profil d'utilisation de cpu dans le chrome après avoir attendu près de 5 minutes. http://i.imgur.com/xmqhI.png il est dit que près de 80% de l'utilisation du processeur est utilisé par getnonlineartimeticks.

Solution: Juste pour l'information des autres. c'est résolu. Le problème était le

xAxis : { 
    tickInterval : 4 
    }, 

Obliger l'axe des x sur un petit tickInterval causé tous les problèmes ...

ici est un 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(); 

}); 
}; 

Answer 1

Solution: Pour l'information des autres. c'est résolu. Le problème était le suivant:

xAxis : { 
tickInterval : 4 
}, 

Forcer le xAxis sur un petit tickInterval a causé tous les problèmes.

Answer 2

Veuillez utiliser la dernière version de Highchart. généralement ce genre de problème se pose en raison de compact (minified) fichier js. Utiliser le fichier highstock.src.js au lieu de highstock.js