2016-07-19 10 views
1

Hey Ich benutze Highcharts-Bibliothek für die Einführung von Graphen von Gasen.So steigern Sie Ihre Leistung in HighCharts

Ich möchte ihre Leistung steigern, so dass jeder Graph mehr als 50.000 Punkte pro Graph verarbeiten kann.

Ich weiß, dass ich turboThreshold angeben 1 Million sein und es wird funktioniert in Ordnung, aber ich habe ein neues Modul namens boostjs von HighCharts bemerken, und ich würde wie es zu benutzen, aber ich weiß nicht, Wie.

Dies ist ein Beispiel der Nutzung:

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

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

offenbar das Skript etwas erwarte ich brauchen nicht zu tun Zugabe nach highchart des script.This seltsam ist, war ich sicher, dass ich Sie müssen den Highcharts-Diagrammeigenschaften eine Eigenschaft hinzufügen, um diesen Boost-Modus zu aktivieren. Ich brauche eine Erklärung zu diesem Skript und wie man es richtig benutzt?

+0

Die Kurzgeschichte ist nur enthalten und es wird funktionieren. Es scheint nur einige Standard-Highcharts-Funktionen zu überschreiben, so dass die Boost-Versionen anstelle der normalen aufgerufen werden. Ich verstehe auch nicht die Einzelheiten davon. – apokryfos

+0

danke ................................................ ........... können wir dieses Thema schließen. – Brk

+0

Wenn Sie eine detailliertere Erklärung finden, können Sie einfach Ihre eigene Frage beantworten. Ich bin mir sicher, dass es jemand anderem irgendwann helfen wird. – apokryfos

Antwort

8

In allen SVG basierten Charting-Lösungen einschließlich HighCharts, sinkt die Leistung nach dem Hinzufügen ein paar hundert Punkte zum Diagramm.

Der Prozess so viele Objekte des Addierens (Punkte) zu einem SVG-Diagramm basierend braucht Zeit und Benutzer-Interaktion mit diesen Objekten (wie Werten, Titel, Tooltips etc.) langsam anfühlt. Weil es eine Beschränkung von SVG-Elementen gibt, die Sie zu DOM hinzufügen können.

HTML5 Leinwand Technologie hat solche Einschränkungen nicht. Aber eine reine HTML5-Canvas-Lösung fehlt von SVGs Stärke wie DOM Zugang, scharfes Rendering zwischen verschiedenen Bildschirmlösungen usw.

So HighCharts Ingenieure eine Hybridlösung mit sowohl mit SVG und HTML5-Canvas Technologien. Sie zeichnen das Diagramm auf einem HTML5-Zeichenbereich und kopieren dann den Inhalt des Diagramms in ein SVG.

So funktioniert HighChart boost.js funktioniert.

Verwandte Themen