Erste Schritte mit chart.js: Zeilen- und Balkendiagramme

Dieses Tutorial baut auf der vorherigen Tabelle auf. Wir werden Anpassungsoptionen untersuchen, um das Erscheinungsbild und die Datendarstellung von Diagramm zu verbessern.

Zeilendiagramme: Visualisieren von Veränderungen im Laufe der Zeit

Zeilendiagramme veranschaulichen effektiv, wie sich eine Variable in Bezug auf eine andere, oft Zeit ändert. Zum Beispiel sind sie ideal, um die Geschwindigkeit eines Fahrzeugs im Laufe der Zeit anzuzeigen.

Diagramm.js vereinfacht die Zeilendiagrammerstellung. Standardmäßig werden die Diagramme mit rgba(0, 0, 0, 0.1) gefüllt. Um die Hintergrundfarbe sichtbar zu machen, stellen Sie sicher, dass die backgroundColor -Eigenschaft festgelegt ist und die fill -Eigenschaft true ist. Der tension ermöglicht eine benutzerdefinierte kubische Interpolation, die die Kurve der Linie zwischen Datenpunkten beeinflusst. Die stepped in "middle" erzeugt einen Schritt-ähnlichen Effekt.

Einzelne Segmente zwischen Datenpunkten können einzigartig gestaltet werden. Dieses Beispiel zeigt die Geschwindigkeit von zwei Autos:

 const CheckSpeed ​​= (ctx, color_a, color_b) => ctx.p0.parsed.y> ctx.p1.parsed.y? color_a: color_b;

lass DataFirst = {
  Etikett: "Car a - Geschwindigkeit (mph)",
  Daten: [0, 59, 75, 20, 20, 55, 40],
  BorderColor: "Schwarz",
  BackgroundColor: "transparent",
  Borderdash: [3, 3],
  getreten: "Mitte"
};

lass DataSecond = {
  Etikett: "Auto B - Geschwindigkeit (MPH)",
  Daten: [20, 15, 60, 60, 65, 30, 70],
  BorderColor: "Blue",
  BackgroundColor: "transparent",
  Segment: {
        BorderColor: CTX => Checkspeed (CTX, 'Orangered', 'Yellowgreen'),
  },
};

lass speeddata = {
  Labels: ["0S", "10S", "20S", "30S", "40S", "50S", "60S"],
  Datensätze: [DataFirst, DataSecond]
};

lineechart = new chart (speedcanvas, {
  Typ: "Zeile",
  Daten: Speeddata
});

Dieser Code vergleicht aufeinanderfolgende Datenpunkte. Wenn die Geschwindigkeit abnimmt, wird orangered verwendet; Ansonsten yellowgreen .

Balkendiagramme: Mehrere Y-Achsen für Klarheit

Für mehrere Datensätze mit unterschiedlichen Skalen verbessert die Verwendung mehrerer Y-Achse die Lesbarkeit. Jeder Datensatz kann einer bestimmten y-Achse unter Verwendung des yAxisID Schlüssels zugeordnet werden.

 lass GravityBars = '#f06292';
lass DensityBars = '#4db6ac';

lass DensityData = {
  Etikett: "Dichte des Planeten (kg/m3)",
  Daten: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638],
  BackgroundColor: Dichtungsbars,
  Yaxisid: "Y-Achse-Dichte"
};

lass GravityData = {
  Etikett: "Schwerkraft des Planeten (M/S2)", "
  Daten: [3.7, 8,9, 9,8, 3,7, 23,1, 9,0, 8,7, 11,0],
  BackgroundColor: GravityBars,
  yaxisid: "y-achse-Grenze"
};

lass planetdata = {
  Labels: ["Mercury", "Venus", "Erde", "Mars", "Jupiter", "Saturn", "Uranus", "Neptun"],
  Datensätze: [DensityData, GravityData]
};

lass ChartOptions = {
  Barpercentage: 1,
  Categorypercentage: 0,8,
  Waage: {
    "y-axis-Dichte": {{
      Netz: {
        Farbe: Dichtungsbars,
        Tickcolor: Dichtebars,
        BorderColor: Dichtebars
      },
      Zecken: {
        Farbe: Dichtebalken
      },
      Position: "links"
    },
    "y-achse-Grenze": {{
      Netz: {
        Farbe: GravityBars,
        Tickcolor: GravityBars,
        BorderColor: GravityBars
      },
      Zecken: {
        Farbe: GravityBars
      },
      Position: "Recht"
    }
  }
};

lass barchart = new chart (densitycanvas, {
  Typ: "Bar",
  Daten: PlanetData,
  Optionen: Diagramme
});

In diesem Beispiel werden einzigartige yAxisID -Werte verwendet und für jede Achse in chartOptions Gitter-, Zecken- und Randfarben angepasst. barPercentage und categoryPercentage -Kontrollstangenabstand.

Abschluss

Dieses Tutorial umfasst die Erstellung und -anpassung von grundlegenden Linien und Bar -Diagramme in Diagramm.js, sodass Sie visuell ansprechende und informative Diagramme erstellen können. Im nächsten Tutorial werden Radar- und Polar Area -Diagramme untersucht.

Das obige ist der detaillierte Inhalt vonErste Schritte mit chart.js: Zeilen- und Balkendiagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!