Share
Im ersten einführenden Tutorial von Chart.js der Serie haben Sie gelernt, wie Sie Chart.js in einem Projekt installieren und verwenden. Sie haben auch einige globale Konfigurationsoptionen kennen gelernt, mit denen Sie die Schriftarten und QuickInfos verschiedener Diagramme ändern können. In diesem Lernprogramm erfahren Sie, wie Sie in Chart.js Linien- und Balkendiagramme erstellen.
Liniendiagramme sind nützlich, wenn Sie die Wertänderungen einer bestimmten Variablen in Bezug auf die Änderungen in einer anderen Variablen anzeigen möchten. Die andere Variable ist normalerweise Zeit. Beispielsweise können Liniendiagramme verwendet werden, um die Geschwindigkeit eines Fahrzeugs während bestimmter Zeitintervalle anzuzeigen.
Mit Chart.js können Sie Liniendiagramme erstellen, indem Sie die Option Art Schlüssel zu Linie. Hier ist ein Beispiel:
var lineChart = new Chart (speedCanvas, type: 'line', data: speedData, Optionen: chartOptions);
Wir werden nun die Daten sowie die Konfigurationsoptionen bereitstellen, die zum Zeichnen des Liniendiagramms erforderlich sind.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], Datensätze: [label: "Car Speed", Daten: [ 0, 59, 75, 20, 20, 55, 40],]; var chartOptions = legend: display: true, position: 'top', Beschriftungen: boxWidth: 80, fontColor: 'black';
Da wir für das Liniendiagramm keine Farbe angegeben haben, wird die Standardfarbe verwendet rgba (0,0,0,0,1) wird verwendet. Wir haben keine Änderungen am Tooltip oder der Legende vorgenommen. Weitere Informationen zum Ändern der Kistengröße, der QuickInfo oder der Legende finden Sie im ersten Teil der Serie.
In diesem Teil konzentrieren wir uns auf verschiedene Optionen, die speziell zum Ändern von Liniendiagrammen verfügbar sind. Alle Optionen und Daten, die wir oben angegeben haben, erstellen das folgende Diagramm.
Die Farbe der Fläche unter der Kurve wird durch das Symbol bestimmt Hintergrundfarbe Schlüssel. Alle mit dieser Methode gezeichneten Liniendiagramme werden mit der angegebenen Farbe gefüllt. Sie können den Wert von einstellen füllen Schlüssel zu falsch wenn Sie nur eine Linie zeichnen möchten und nicht mit einer Farbe füllen.
Vielleicht haben Sie auch bemerkt, dass wir diskrete Datenpunkte verwenden, um das Diagramm zu zeichnen. Die Bibliothek interpoliert automatisch die Werte aller anderen Punkte mithilfe integrierter Algorithmen.
Standardmäßig werden die Punkte mit einer benutzerdefinierten gewichteten kubischen Interpolation gezeichnet. Sie können jedoch auch den Wert von einstellen cubicInterpolationMode Schlüssel zu monoton Um Punkte genauer zu zeichnen, wenn das Diagramm, das Sie zeichnen, durch die Gleichung definiert wird y = f (x). Die Spannung der aufgetragenen Bezierkurve wird durch die bestimmt lineTension Schlüssel. Sie können den Wert auf Null setzen, um gerade Linien zu zeichnen. Bitte beachten Sie, dass dieser Schlüssel beim Wert von ignoriert wird cubicInterpolationMode wurde bereits angegeben.
Sie können den Wert der Rahmenfarbe und deren Breite auch mit einstellen Randfarbe und Rahmenbreite Schlüssel. Wenn Sie das Diagramm mit einer gestrichelten Linie anstelle einer durchgezogenen Linie darstellen möchten, können Sie das verwenden borderDash Schlüssel. Es akzeptiert ein Array als Wert, dessen Elemente die Länge und den Abstand der Striche bestimmen.
Das Aussehen der gezeichneten Punkte kann mit der Taste gesteuert werden pointBorderColor, pointBackgroundColor, pointBorderWidth, pointRadius, und pointHoverRadius Eigenschaften. Da ist auch ein pointHitRadius Mit dieser Taste wird der Abstand festgelegt, bei dem die gezeichneten Punkte mit der Maus interagieren.
var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], Datensätze: [label: "Car Speed", Daten: [ 0, 59, 75, 20, 20, 55, 40], lineTension: 0, füllen: false, borderColor: 'orange', backgroundColor: 'transparent', borderDash: [5, 5], pointBorderColor: 'orange', pointBackgroundColor : 'rgba (255,150,0,0.5)', pointRadius: 5, pointHoverRadius: 10, pointHitRadius: 30, pointBorderWidth: 2, pointStyle: 'rectRounded'];
Obenstehendes speedData object stellt die gleichen Datenpunkte wie das vorherige Diagramm dar, wobei jedoch für alle Eigenschaften benutzerdefinierte Werte festgelegt sind.
Sie können auch mehrere Linien in einem einzelnen Diagramm zeichnen und verschiedene Optionen zum Zeichnen jeder einzelnen Zeile wie folgt bereitstellen:
var dataFirst = label: "Auto A - Geschwindigkeit (mph)", Daten: [0, 59, 75, 20, 20, 55, 40], lineTension: 0.3, // Set More Options; var dataSecond = label: "Auto B - Geschwindigkeit (mph)", Daten: [20, 15, 60, 60, 65, 30, 70], // Weitere Optionen setzen; var speedData = labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"], Datensätze: [dataFirst, dataSecond]; var lineChart = new Chart (speedCanvas, type: 'line', data: speedData);
Balkendiagramme sind nützlich, wenn Sie eine einzelne Metrik für verschiedene Entitäten vergleichen möchten, z. B. die Anzahl der von verschiedenen Unternehmen verkauften Autos oder die Anzahl der Personen in bestimmten Altersgruppen in einer Stadt. Sie können Balkendiagramme in Chart.js erstellen, indem Sie die Option Art Schlüssel zu Bar. Standardmäßig werden dadurch Diagramme mit vertikalen Balken erstellt. Wenn Sie Diagramme mit horizontalen Balken erstellen möchten, müssen Sie das festlegen Art zu horizontale Linie.
var barChart = new Chart (densityCanvas, type: 'bar', data: densityData, Optionen: chartOptions);
Erstellen wir ein Balkendiagramm, das die Dichte aller Planeten unseres Sonnensystems darstellt. Die Dichtedaten wurden dem von der NASA zur Verfügung gestellten Planetary Fact Sheet entnommen.
var densityData = label: 'Dichte der Planeten (kg / m3)', Daten: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638]; var barChart = new Chart (densityCanvas, type: 'bar'), data: labels: ["Merkur", "Venus", "Erde", "Mars", "Jupiter", "Saturn", "Uranus", " Neptune "], Datensätze: [densityData]);
Mit den oben angegebenen Parametern wird das folgende Diagramm erstellt:
Genau wie das Liniendiagramm sind auch hier die Balken hellgrau. Sie können die Farbe der Balken mit ändern Hintergrundfarbe Schlüssel. Ebenso können Farbe und Breite der Ränder verschiedener Balken mit der angegeben werden Randfarbe und Rahmenbreite Schlüssel.
Wenn Sie möchten, dass die Bibliothek das Zeichnen des Randes für eine bestimmte Kante überspringt, können Sie diese Kante als Wert von angeben borderSkipped Schlüssel. Sie können den Wert auf einstellen oben, links, Unterseite, oder Recht. Sie können auch die Rahmen- und Hintergrundfarbe verschiedener Balken ändern, wenn sie mit der Maus in der Maus gehalten werden hoverBorderColor und hoverBackgroundColor Schlüssel.
Die Balken im obigen Balkendiagramm wurden automatisch angepasst. Sie können jedoch die Breite der einzelnen Balken mit der barDicke und barPercentage Eigenschaften. Das barDicke Mit der Taste wird die Stärke der Balken in Pixeln festgelegt barPercentage wird verwendet, um die Dicke als Prozentsatz der verfügbaren Kategorienbreite festzulegen.
Sie können eine bestimmte Achse auch mit ihrer anzeigen oder ausblenden Anzeige Schlüssel. Wert von einstellen Anzeige zu falsch wird diese bestimmte Achse ausblenden. Weitere Informationen zu all diesen Optionen finden Sie auf der Dokumentationsseite.
Lassen Sie uns das Dichtediagramm interessanter gestalten, indem Sie die Standardwerte für Balkendiagramme mit dem folgenden Code überschreiben.
var densityData = label: 'Dichte der Planeten (kg / m3)', Daten: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], backgroundColor: ['rgba (0, 99, 132, 0.6 ) ',' rgba (30, 99, 132, 0,6) ',' rgba (60, 99, 132, 0,6) ',' rgba (90, 99, 132, 0,6) ',' rgba (120, 99, 132) 0,6) ',' rgba (150, 99, 132, 0,6) ',' rgba (180, 99, 132, 0,6) ',' rgba (210, 99, 132, 0,6) ',' rgba (240, 99) 132, 0,6) '], borderColor: [' rgba (0, 99, 132, 1) ',' rgba (30, 99, 132, 1) ',' rgba (60, 99, 132, 1) ', "rgba (90, 99, 132, 1)", "rgba (120, 99, 132, 1)", "rgba (150, 99, 132, 1)", "rgba (180, 99, 132, 1) ',' rgba (210, 99, 132, 1) ',' rgba (240, 99, 132, 1) '], borderWidth: 2, hoverBorderWidth: 0; var chartOptions = skaliert: yAxes: [barPercentage: 0.5], Elemente: Rechteck: borderSkipped: 'left',; var barChart = new Chart (densityCanvas, Typ: 'horizontalBar'), Daten: Labels: ["Merkur", "Venus", "Erde", "Mars", "Jupiter", "Saturn", "Uranus", " Neptune "], Datensätze: [densityData], Optionen: chartOptions);
Das densityData Mit dem Objekt legen Sie die Rahmen- und Hintergrundfarbe der Balken fest. Es gibt zwei Dinge, die es zu beachten gilt. Zuerst die Werte von barPercentage und borderSkipped Eigenschaften wurden im eingestellt chartOptions Objekt statt des dataDensity Objekt.
Zweitens das Diagramm Art wurde auf gesetzt horizontale Linie diesmal. Dies bedeutet auch, dass Sie den Wert von ändern müssen barDicke und barPercentage für die y-Achse anstelle der x-Achse, damit sie Auswirkungen auf die Balken haben.
Die oben angegebenen Parameter erstellen das folgende Balkendiagramm.
Sie können auch mehrere Datensätze im selben Diagramm zeichnen, indem Sie eine zuweisen Ich würde der entsprechenden Achse zu einem bestimmten Datensatz. Das xAxisID Mit der Taste wird das zugewiesen Ich würde einer beliebigen x-Achse zu Ihrem Datensatz. Ebenso die yAxisID Mit der Taste wird das zugewiesen Ich würde einer beliebigen y-Achse zu Ihrem Datensatz. Beide Achsen haben auch eine Ich würde Schlüssel, den Sie verwenden können, um ihnen eindeutige IDs zuzuweisen.
Wenn der letzte Absatz etwas verwirrend war, hilft das folgende Beispiel, die Dinge zu klären.
var densityData = label: 'Planetendichte (kg / m3)', Daten: [5427, 5243, 5514, 3933, 1326, 687, 1271, 1638], Hintergrundfarbe: 'rgba (0, 99, 132, 0,6) ', borderColor:' rgba (0, 99, 132, 1) ', yAxisID: "y-Achsendichte"; var gravityData = label: 'Schwerkraft des Planeten (m / s2)', Daten: [3.7, 8.9, 9.8, 3.7, 23.1, 9.0, 8.7, 11.0], backgroundFarbe: 'rgba (99, 132, 0, 0.6) ', borderColor:' rgba (99, 132, 0, 1) ', yAxisID: "y-Achsen-Schwerkraft"; var planetData = labels: ["Merkur", "Venus", "Erde", "Mars", "Jupiter", "Saturn", "Uranus", "Neptun"], Datensätze: [densityData, gravityData]; var chartOptions = skaliert: xAxes: [barPercentage: 1, categoryPercentage: 0.6], yAxes: [id: "y-Achsendichte", id: "y-axis-gravity"] ; var barChart = new Chart (densityCanvas, type: 'bar', data: planetData, Optionen: chartOptions);
Hier haben wir zwei Y-Achsen mit eindeutigen IDs erstellt, die mit den einzelnen Datensätzen zugewiesen wurden yAxisID Schlüssel. Das barPercentage und categoryPercentage Hier wurden Tasten verwendet, um die Balken für einzelne Planeten zusammenzufassen. Rahmen categoryPercentage Bei einem niedrigeren Wert wird der Abstand zwischen den Balken verschiedener Planeten erhöht. Ebenso Einstellung barPercentage Ein höherer Wert verringert den Abstand zwischen den Stäben desselben Planeten.
In diesem Lernprogramm haben wir alle Aspekte von Liniendiagrammen und Balkendiagrammen in Chart.js behandelt. Sie sollten jetzt in der Lage sein, einfache Diagramme zu erstellen, ihr Erscheinungsbild zu ändern und mehrere Datensätze ohne Probleme in demselben Diagramm zu zeichnen. Im nächsten Teil der Serie erfahren Sie mehr über die Radar- und Polarkreisdiagramme in Chart.js.
Ich hoffe, Ihnen hat dieses Tutorial gefallen. Wenn Sie Fragen haben, teilen Sie mir dies bitte in den Kommentaren mit.
Accentsconagua