Eine Einführung in Diagramm.js 2.0

Dieser Artikel ist Teil unserer modernen JavaScript Anthologie. Eine umfassende Anleitung zum modernen JavaScript finden Sie in SitePoint Premium und laden Sie Ihre Kopie herunter.

Peer, die von Tim Severien und Simon Codrington überprüft wurden. Vielen Dank an alle Peer -Rezensenten von SitePoint!

datenhaarige Websites erfordern eine effektive Datenvisualisierung. Rohe Zahlen sind für den Menschen schwer zu erfassen; Diagramme und Grafiken bieten intuitive, zugängliche Alternativen, auch für nicht englische Lautsprecher. Klare Grafiken verbessern das Verständnis und die Website der Website.

Dieses Tutorial führt Diagramm.js, eine JavaScript -Diagrammbibliothek vor. In sechs Beispielen demonstrieren wir die Verwendung und Konfiguration.

Schlüsselmerkmale von chart.js 2.0:

vielseitige und benutzerfreundliche JavaScript-Bibliothek für verschiedene Diagrammerstellung.
einfache Installation und Schnelllernenkurve.
unterstützt verschiedene Diagrammtypen: Linie, Balken, Radar, Polarbereich, Kuchen und Donut. Der Diagrammtyp wird leicht über die Eigenschaft
• geändert. type
Verbesserte Funktionen: Mobile Reaktionsfähigkeit und integrierte Titel.
anpassbare Interaktivität (z. B. Umschaltung von Datensätzen über Legendeklicks).
Umfangreiche Anpassungsoptionen für das Erscheinungsbild (Farben, Tooltips, Animationen).

Warum chart.js?

chart.js balances einfache Verwendung mit leistungsstarker Anpassung. Es vermeidet die steile Lernkurve komplexerer Bibliotheken und bietet gleichzeitig ausreichende Flexibilität. Die acht Diagrammtypen decken die meisten Visualisierungsanforderungen ab. Die aktive Open-Source-Community sorgt für eine qualitativ hochwertige Wartung. Version 2.0 führte signifikante Syntaxverbesserungen und mobile Unterstützung ein. In diesem Tutorial wird Chart.JS 2.0 verwendet. Ein Abschnitt über den Übergang von 1.0 zu 2.0 ist enthalten.

Installieren von Diagramm.js:

chart.js prioritiert die Einfachheit. Die einfachste Installationsmethode erfolgt über ein CDN:

<code class="language-html"></code>

Sie benötigen auch ein

Element: <canvas></canvas>

<code class="language-html"><canvas id="myChart"></canvas></code>

Verwenden Sie alternativ einen Paketmanager (Einzelheiten finden Sie im Handbuch für Erste Schritte).

Erforschen wir die Funktionen von Chart.js.

Zeilendiagramm:

Dieses minimale Zeilendiagramm zeigt die Kernstruktur von Chart.js:

<code class="language-javascript">var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});</code>

Siehe CODEPEN -Beispiel

Erläuterung:

• : Erhält den 2D -Rendering -Kontext des ctx. <canvas></canvas>
• : Erstellt das Diagrammobjekt. new Chart(ctx, { ... }) Gibt den Diagrammtyp an; type hält die Diagrammdaten. Arrayindizes bestimmen Grafikpositionen. data

Pro -Tipp: Klicken auf Legends Schaltet die Datensätze um. Dies gilt für alle Diagrammtypen.

Balkendiagramm:

ändern Sie einfach type: 'line' im vorherigen Beispiel in type: 'bar'.

Siehe CODEPEN -Beispiel

Radardiagramm:

ändern type zu 'radar'. Passen Sie backgroundColor und borderColor für eine bessere Lesbarkeit mit überlappenden Daten ein.

Siehe CODEPEN -Beispiel

Polar -Diagramm:

ändern type zu 'polarArea'. Polar -Diagramme visualisieren einzelne Datensätze.

Siehe CODEPEN -Beispiel

Kuchen- und Donut -Diagramme:

ändern type zu 'pie' oder 'doughnut'. Donut -Diagramme verwenden cutoutPercentage, um die Lochgröße zu steuern.

Siehe CodePen Beispiel (PIE) Siehe CodePen Beispiel (Donut)

Diagramm.js Konfiguration (options):

Die options Eigenschaft ermöglicht eine umfassende Anpassung:

• Titel: Title mit options: { title: { display: true, text: 'My Chart' } }.
hinzufügen
• cutoutPercentage: steuert die Lochgröße des Donut-Diagramms (0-50).
• gestapelte Balkendiagramme: Verwenden Sie options: { scales: { yAxes: [{ stacked: true }] } } für gestapelte Balken.

Ereignisbehandlung:

Legende anpassen Klicken Sie auf Verhalten:

<code class="language-html"></code>

Beispiel: Dynamisches Bildunterschrift Update:

Siehe CodePen -Beispiel Dieses Beispiel aktualisiert eine Bildunterschrift basierend auf Legend -Klicks.

chart.js 2.0 vs. 1.0:

Schlüsselunterschiede:

• Diagrammdeklaration: 2.0 verwendet einen einzelnen new Chart() -Anruf mit type, data und options. 1.0 verwendet Funktionskettung.
• Mobile Unterstützung: 2.0 enthält native mobile Unterstützung.
• Integrierte Titel: 2.0 bietet integrierte Titel.

Schlussfolgerung:

chart.js ist ideal für schnelle Diagrammprototypen. Die vielfältigen Chartentypen und die Benutzerfreundlichkeit machen es zu einem wertvollen Tool für jeden Webentwickler. Weitere Informationen finden Sie in der offiziellen Diagramm.JS -Dokumentation.

(Hinweis: Ersetzen

Das obige ist der detaillierte Inhalt vonEine Einführung in Diagramm.js 2.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!