2013-01-03 6 views
3

Je souhaite créer un graphique avec un rafraîchissement interactif. J'utilise jqPlot, mais en essayant de mettre à jour le graphique avec l'appel de replot() ou de le redessiner, cela provoque une énorme fuite de mémoire du navigateur. Avez-vous une idée de comment je peux le réparer?jQPLOT - Fuite de mémoire

function crateChart() { 
    var s1 = [['a',6], ['b',8], ['c',14], ['d',20]]; 
    var s2 = [['a', 8], ['b', 12], ['c', 6], ['d', 9]]; 

    this.plot = $.jqplot('chart', [s1, s2], { 
     seriesDefaults: { 
     renderer:$.jqplot.DonutRenderer, 
     rendererOptions:{ 
      sliceMargin: 3, 
      startAngle: -90, 
      showDataLabels: true, 
      dataLabels: 'value' 
      } 
     } 
    }); 
} 

function update() { 
    ChartTester.plot.series[0].data = [ 
     ['a', Math.random() * 100], 
     ['b', Math.random() * 100], 
     ['c', Math.random() * 100], 
     ['d', Math.random() * 100] 
    ]; 

    ChartTester.plot.destroy(); 
    $('#chart *').unbind(); 
    $('#chart').empty(); 
    ChartTester.plot.redraw(); 
} 
+0

Est-ce une option pour construire le graphique du côté serveur et ensuite envoyer l'image finie au navigateur? – djangofan

+0

Quel (s) navigateur (s) ont la fuite de mémoire? Il y a une longue histoire de jqPlot et des problèmes de mémoire avec IE <9 en particulier. – Mark

+1

Chrome V24 et Firefox – mal200

Répondre

0

Je n'ai pas une solution « plug and play », mais un bon exemple de données de manière dynamique mise à jour sur le graphique JQPlot pour vous inspirer: http://jsfiddle.net/fracu/HrZcj/

Fondamentalement, la fonction de mise à jour est comme ça:

function updateSeries() { 
    myData.splice(0, 1); 
    x = (new Date()).getTime(); 
    y = Math.floor(Math.random() * 100); 
    myData.push([x, y]); 

    plot1.series[0].data = myData; 
    plot1.resetAxesScale(); 
    plot1.axes.xaxis.numberTicks = 10; 
    plot1.axes.y2axis.numberTicks = 15; 
    plot1.replot(); 
}