Erste Schritte mit Diagramm.js: Einführung

Rohdaten, ob als Text oder Tabellen dargestellt, können schwer zu verdauen sein. Diagramm.js bietet eine überzeugende Lösung durch Visualisierung von Daten und erleichtert das Verständnis komplexer Informationen.

Betrachten Sie diese Tabelle, die die zehn bevölkerungsreichsten Länder der Welt zeigt: (Beispieltabelle, die für die Kürze weggelassen wurde, da sie nicht direkt relevant für die Erklärung der Funktionalität von Diagramm.JS).

Um Diagramm.js zu verwenden, installieren Sie es mit der Installation:

 NPM Install -Diagramm.js -Save

Während Diagramm.js zuvor im Moment.js gebündelt wurde, ist dies nicht mehr der Fall. Für Zeitskala-Diagramme benötigen Sie einen Datumsadapter (wie Date-FNS) und die entsprechende Bibliothek. Date-FNS ist eine leichte Option für einfachere Anwendungen. In diesem Beispiel wird Datum-Fns verwendet und die Schriftart der Legende anpasst.

 var barchart = new chart (popcanvas, {
    Typ: 'Bar',
    Daten: Daten,
    Optionen: {
        Plugins: {
          Legende: {
            Anzeige: wahr,
            Position: "unten",
            Labels: {
              Boxwidth: 50,
              Farbe: Schwarz",
              Schriftart: {
                Größe: 24,
                Gewicht: "fett"
              }
            }
          }
        }
    }
}); 

Diagramm.js ermöglicht eine körnige Steuerung über Tooltips. Chart.defaults.plugins.tooltip legt globale Tooltip -Stile fest, während einzelne Diagrammoptionen eine weitere Anpassung bieten. In diesem Beispiel wird das Anpassen von Schriftart, Polsterung, Pfeilgröße und Hintergrund angezeigt.

 Optionen: {
    Plugins: {
      Legende: {
        Anzeige: wahr,
        Position: "unten",
        Labels: {
          Boxwidth: 50,
          Farbe: Schwarz",
          Schriftart: {
            Größe: 24,
            Gewicht: "fett"
          }
        }
      },
      Tooltip: {
        Correerradius: 0,
        CaretSize: 0,,
        Polsterung: 10,,
        BackgroundColor: 'Schwarz',
        BorderColor: "Gray",
        Grenzbreite: 5,
        Titlemarginbottom: 4,
        Titelfont: {
          "Gewicht": "mutig",
          "Größe": 22
        }
      }
    }
}

Das Einstellen caretSize auf 0 verbirgt den Tooltip -Pfeil. Die folgende Demo zeigt diese angepassten Tooltips:

Abschluss:

Diese Einführung in Diagramm.js zeigte die Erstellung und Anpassung der Balkendiagramme. Die angezeigten Konfigurationsoptionen gelten für verschiedene Diagrammtypen. Zukünftige Tutorials werden tiefer in die Linien- und Balkendiagramme eingehen. Chart.js ist ein leistungsstarkes Tool für die Datenvisualisierung in der JavaScript -Webentwicklung. (Hinweis: Bevölkerungsdatenquelle zitiert).

Das obige ist der detaillierte Inhalt vonErste Schritte mit Diagramm.js: Einführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!