Google Chart Ständige Neuzeichnen Speicher Erhöhen

Ich bin Neuzeichnen des Diagramms auf der Grundlage neuer Daten jede Sekunde, und es funktioniert und sieht toll aus, aber ich merke, es erhöhe ich den Speicher von 1 MB Nutzung pro Sekunde. Irgendeine Möglichkeit dieses Problem zu beheben? Ich merke, wenn ich nur noch statischen Diagramme, dann ist der Speicher stabilisiert, aber sobald ich hinzufügen, die ständige Neuzeichnen (um die Daten zu aktualisieren), die Speicherauslastung nie aufhört.

Zuerst dachte ich, es war, weil ich eine neue Instanz zu erstellen das Diagramm jedes mal, also habe ich den code ändern so war es nur Neuzeichnen der gleichen Instanz jeder Zeit, aber das half nicht viel.

Weiss jemand wie man es beheben? Muss ich einen dump der alten Grafik zuerst irgendwie?

google.setOnLoadCallback(test);

var chart;
var chartOptions;
var chartCreate;

function test() {
    chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
            ['', 0]
    ]);
    chartOptions = {};
    chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
          chartCreate.draw(chart, chartOptions);
    ]);
}

function test2() {
    chart.removeRows(0, 5);
    for (var i = 0; i < dataSpaceArray.length; ++i) {
        chart.addRow([dataTimeArray[i], dataSpaceArray[i], dataSpeedArray[i]]);
    }
        chartCreate.draw(chart, chartOptions);
}

setTimeout(test2,1000)
  • Der Speicherverlust auf redraw-Problem ist bekannt. Es gibt nichts, was Sie dagegen tun können wie weit ich bin bewusst. Die Visualisierungs-API-dev-team weiß es und schaut hinein.
  • Hast du irgendwelche Quellen dafür? Das scheint wirklich seltsam, es ziemlich viel bedeutet, Sie können nicht aktualisieren Sie die Daten in die Diagramme dann.
  • Zur info, der neueste release candidate-version (Last v1.1 statt v1) enthält einige fixes für die memory-leak-Probleme.
  • Ich habe versucht für zwei Tage nun verschiedene Wege daran vorbei, aber nichts funktioniert. Unter vielen Dingen, die ich habe versucht, löschen Sie das ganze mit div (mit dem besten Ergebnis, obwohl der abt. 400 kB Leck/update). @Alex-Lösung nichts tun. Wie macht man das laden der v1.1, @asgallant?
  • Wenn Sie anrufen google.load('visualization', '1', {packages: [/* packages list */], callback: drawChart}); ersetzen Sie die 1 mit 1.1.
  • Ok, vielen Dank! 1.1 das Leck (falls vorhanden) ist zu vernachlässigen. Insgesamt ist der Verbrauch höher, obwohl (~15MB von ~7MB). Funktioniert auf pc aber sehr träge auf dem Raspberry Pi (eine andere Geschichte :-). Sollten Sie überlegen, 1.1, eine gute Antwort zu dieser Frage!

InformationsquelleAutor zen | 2013-09-14
  1. 6

    Habe ich dies Problem gelöst, indem globaly speichern Sie das Diagramm. Vor dem zeichnen der Grafik, die Sie brauchen, um zu prüfen, ob chart instanziiert wurde. Wenn nicht, erstellen Sie die neue Diagramm-Objekt sonst nennen clearChart() Methode vor dem zeichnen zu. Wie diese:

    //Store all chart objects in a global array to avoid memory leak
var charts = [];

function drawChart(chartName, element, data, chartOptions) {
   if (charts[chartName] === undefined || charts[chartName] === null) {
          charts[chartName] = new google.visualization.LineChart(group);
   } else {
          charts[chartName].clearChart();
   }
   charts[chartName].draw(dataTable, chartOptions);
}
    • bestätigen, dass dies funktioniert, aber nach clearChart ich hatte zu instanziieren wieder - neues von google.die Visualisierung.LineChart(Gruppe);
    InformationsquelleAutor truongnguyen1912
  2. 3

    Hatte dasselbe Problem, konnte es beheben, indem Sie ein paar Zeilen von Google clearChart () - Funktion.

    W.clearChart = function() {

    //this fixes the leak
    hv = {};
    iv = {};
    jv = {};

    ...
};

    Mehr Details:

    1. Hier ist die Google-Datei ich die änderung an:

    https://www.google.com/uds/api/visualization/1.0/4086f2e8fc632adc52e6d6795a5637a4/format+en,default,corechart.I.js

    1. Laden Sie diese Datei herunter, machen die erwähnten Veränderungen. In Ihrem code, fügen Sie ein script-tag nicht für das laden über Datei vom webserver und kommentieren Sie die folgende Zeile:

      //google.load('visualization', '1', { packages: ['corechart'] });

    2. Den Speicher gehen, sondern kommen wieder nach unten auf seine eigene nach ein paar Minuten.

    3. Ich bin mit clearChart (), aber wenn Sie nicht möchten, deaktivieren Sie das Diagramm, dann erstellen Sie Ihre eigenen Funktion (z.B. memoryLeakFix()) und rufen Sie in regelmäßigen Abständen.

    4. Hier ist eine test-Seite (die 1.js ist die geänderte Datei aus Schritt 1). Es schafft im Grunde neues Diagramm und zeichnet jede 100ms. Sehen Sie den Speicher gehen, aber drücken Sie "Stop" link zum beenden der Neuzeichnung und warten Sie einige Minuten, und der Speicher wird nach unten kommen.

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"      type="text/javascript"></script>
  <script src="https://www.google.com/jsapi"                                          type="text/javascript"></script>

  <script src="1.js"                                          type="text/javascript"></script>


  <script type="text/javascript">

      //init google charts
//       google.load('visualization', '1', { packages: ['corechart'] });
      google.load('visualization', '1', { packages: ['table'] });

  </script>


</head>
<body>

<a href='#' onclick='stop()'>Stop</a>
  <div class='chart'></div>

  <script>

      var chart; var table;

      function createChart(container)
      {
          if(chart != undefined)
              chart.clearChart();

          //init chart
          chart = new google.visualization.LineChart(container[0]);

          //init chart data
          if(table == undefined)
          {
              table = new google.visualization.DataTable();

              table.addColumn('datetime', 'Time');
              table.addColumn('number', 'Value');

              var count = 0;

              //periodically add rows
              setInterval(function()
              {
                  //add row
                  table.addRows([ [new Date(), count++]]);    
              }, 1000);


          }
      }


      //start redrawing
      var id = setInterval(function()
      {
          createChart($('.chart'));

          drawChart();
      }, 100);

      //stop redrawing
      function stop()
      {
          clearInterval(id);
      }

      //draw chart
      function drawChart()
      {
          chart.draw(table, { curveType: "function",

              width:      250, 
              height:     250,
              pointSize:  1,
              legend:     { position: 'none' },
              chartArea: { 'width': '90%', left: 50 },
          });
      }

  </script>   
</body>
</html>
    • Ich kann sehen, dass Ihre beeindruckende hack kann vermeiden, dass einige Speicher-Lecks. Aber die Menschen sollten sich bewusst sein, dass diese werden spröde in ein paar Möglichkeiten. Wenn Sie mit anderen Möglichkeiten der Wiederverwendung von Diagrammen, insbesondere in Form von dashboards, sind sehr wahrscheinlich Komplikationen. Auch, wenn eine neue version der Bibliothek erstellt, die den kompilierten Namen von Klassen und internen Variablen wird wahrscheinlich anders sein. Aber hoffentlich, wird die neue version behoben haben diese Speicherlecks.
    InformationsquelleAutor Alex
Schreibe einen Kommentar