So erstellen Sie skalierbare Diagramme mit Highcharts

So erstellen Sie skalierbare Diagramme mit Highcharts

Übersicht:
Highcharts ist eine leistungsstarke JavaScript-Diagrammbibliothek, mit der Sie eine Vielzahl interaktiver Diagramme in Websites oder Anwendungen erstellen können. In diesem Artikel konzentrieren wir uns auf die Erstellung skalierbarer Diagramme mit Highcharts. Ein zoombares Diagramm bedeutet, dass Benutzer mit Gesten oder Klicks in das Diagramm hinein- oder herauszoomen können, um die Daten detaillierter oder auf einer allgemeineren Ebene anzuzeigen. Wir werden Beispielcode verwenden, um zu veranschaulichen, wie die Highcharts-Bibliothek eingerichtet und verwendet wird, um diese Funktionalität zu erreichen.

Schritte:

1. Highcharts-Bibliothek einführen
   Zuerst müssen wir die Highcharts-Bibliothek in die HTML-Seite einführen. Sie können die Highcharts-Bibliothek von der offiziellen Website von Highcharts herunterladen und sie dann wie unten gezeigt in das

   Außerdem müssen wir das Exportmodul einführen:

   <script src="https://code.highcharts.com/highcharts.js"></script>

Container erstellen
2. Als nächstes müssen wir einen Container auf der HTML-Seite erstellen, um das Diagramm zu platzieren. Ein leerer Container mit einer eindeutigen ID kann mit einem
   -Element erstellt werden:

   <script src="https://code.highcharts.com/modules/exporting.js"></script>

   
   

   Diagrammkonfiguration festlegenIn JavaScript müssen wir einige Konfigurationsoptionen für Highcharts-Diagramme bereitstellen. Der folgende Beispielcode zeigt, wie Sie die Diagrammkonfiguration festlegen und ein einfaches skalierbares Liniendiagramm erstellen:
3. 
   

   <div id="chart-container"></div>

Im obigen Beispielcode haben wir den Diagrammtyp auf ein Liniendiagramm festgelegt und die Skalierung der x-Achse aktiviert. Die Daten des Diagramms befinden sich im Datenarray unter „Reihe“.
Gestenzoomfunktion hinzufügen
4. Highcharts bietet ein Modul namens „mobile.js“, das die Gestenzoomfunktion auf Mobilgeräten unterstützen kann. Wir müssen dieses Modul nur bei der Einführung der Highcharts-Bibliothek einführen, um die Gesten-Zoom-Funktion zu aktivieren:

   // 设置图表配置
   var options = {
     chart: {
       type: 'line',
       zoomType: 'x',  // 开启x轴缩放
     },
     title: {
       text: '可缩放折线图'
     },
     xAxis: {
       type: 'datetime'  // x轴类型为日期时间
     },
     yAxis: {
       title: {
         text: '值'
       }
     },
     series: [{
       data: [5, 10, 15, 20, 25]  // 图表数据
     }]
   };
   
   // 创建图表
   Highcharts.chart('chart-container', options);

   
   Nach der Einführung erkennt Highcharts automatisch den Typ des Geräts, auf das zugegriffen wird, und aktiviert die entsprechenden interaktiven Funktionen.

Benutzerdefinierte Skalierungsoptionen
5. Zusätzlich zur standardmäßigen X-Achsen-Skalierungsfunktion können wir mit Highcharts auch Skalierungsoptionen anpassen. Durch Ändern der Eigenschaften minRange und maxRange des xAxis-Objekts in den Optionen können Sie die minimalen und maximalen Bereichswerte für die Skalierung der x-Achse festlegen. Wenn wir beispielsweise den X-Achsen-Zoom auf 1 Stunde bis 30 Tage begrenzen möchten, können wir den folgenden Code hinzufügen:

   <script src="https://code.highcharts.com/modules/mobile.js"></script>

   
   Nachdem Sie dies festgelegt haben, wird der Bereich des Diagramms angezeigt, wenn der Benutzer einen Zoomvorgang auf dem Diagramm durchführt Die x-Achse wird auf den angegebenen Bereich begrenzt.

Zusammenfassung:
Mit den oben genannten Schritten können wir mit Highcharts ein skalierbares Diagramm erstellen. Zuerst müssen wir die Highcharts-Bibliothek vorstellen und einen Container erstellen, der das Diagramm enthält. Legen Sie dann die Konfigurationsoptionen des Diagramms entsprechend Ihren Anforderungen fest, einschließlich Diagrammtyp, X-Achsen- und Y-Achsen-Einstellungen sowie Diagrammdaten. Als nächstes kann das mobile.js-Modul eingeführt werden, um die Gesten-Zoom-Funktionalität auf Mobilgeräten zu ermöglichen. Schließlich ermöglichen uns benutzerdefinierte Konfigurationsoptionen, die Details des Skalierungsverhaltens weiter zu steuern. Ich hoffe, dieser Artikel hilft Ihnen beim Erstellen skalierbarer Diagramme mit Highcharts!


Code ist der Schlüssel zum Beherrschen von Fähigkeiten. Daher wird empfohlen, dass Sie nach dem Verstehen des theoretischen Wissens versuchen, mit Highcharts selbst skalierbare Diagramme zu erstellen, um bessere Lernergebnisse zu erzielen.