Erste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme

In diesem Tutorial wird erläutert, wie man mit Diagramm.js Kuchen-, Ring- und Bubble -Diagramme erstellt. Zuvor haben wir vier Chart -Arten von Charts gelernt.

Erstellen Sie Kuchen- und Ringdiagramme

Kreisdiagramme und Ringdiagramme sind ideal, um die Proportionen eines Ganzen anzuzeigen, das in verschiedene Teile unterteilt ist. Zum Beispiel kann ein Kreisdiagramm verwendet werden, um den Prozentsatz der männlichen Löwen, weiblichen Löwen und jungen Löwen in einer Safari oder den Prozentsatz der Stimmen zu zeigen, die verschiedene Kandidaten bei der Wahl erhalten.

Kreisdiagramme eignen sich nur zum Vergleich einzelner Parameter oder Datensätze. Es ist zu beachten, dass das Kreisdiagramm keine Entitäten ohne Wert zeichnen kann, da der Winkel des Lüfters im Kreisdiagramm von der numerischen Größe des Datenpunkts abhängt. Dies bedeutet, dass eine Entität mit einem Anteil von Null nicht in der Tabelle angezeigt wird. In ähnlicher Weise können negative Werte nicht auf Kreisdiagrammen gezeichnet werden.

In Diagramm.js können Sie ein Kreisdiagramm erstellen, indem Sie type Typtaste in pie einstellen, und ein Ringdiagramm, indem Sie type auf doughnut einstellen. Hier ist ein Beispiel für das Erstellen von beiden Diagrammen:

 var piechart = neues Diagramm (Votescanvas, {
    Typ: 'Kuchen',
    Daten: VotesData,
    Optionen: Diagramme
});

var Doughnutchart = neues Diagramm (Votescanvas, {{
    Typ: 'Donut',
    Daten: VotesData,
    Optionen: Diagramme
});

Lassen Sie uns ein Kreisdiagramm erstellen, das Ölexportdaten (Einheit: Milliarden US -Dollar) für die fünf wichtigsten Ölexporteure im Jahr 2015 erstellen.

 var data = {
    Etiketten: [
        "Saudi-Arabien",
        "Russland",
        "Irak",
        "VAE",
        "Kanada"
    ],
    Datensätze: [
        {
            Daten: [133.3, 86,2, 52,2, 51,2, 50,2],
            Hintergrundkolor: [
                "#Ff6384",
                "#63ff84",
                "#84ff63",
                "#8463ff",
                "#6384ff"
            ]
        }]
}; 

Sie können verschiedene Schlüssel verwenden, um die Anzeige des obigen Diagramms zu steuern, z. B. ein cutout , der eine Zahl oder eine Zeichenfolge sein kann. Wenn der Wert als Pixelwert angesehen wird, wird der Wert als Prozentsatz des Gesamtradius angesehen. Sie können rotation Rotationsschlüssel verwenden, um den Startwinkel des Diagramms anzugeben. In ähnlicher Weise können Sie auch circumference Schaltungsschlüssel verwenden, um den Winkel anzugeben, in dem das Diagramm beim Aufstellen der Daten scannt. Beide Winkel werden eher in Grad als in Radians ausgedrückt.

Zwei verschiedene Animationen können beim Zeichnen eines Diagramms aktiviert werden. Sie können den animateRotate -Schlüssel verwenden, um anzugeben, ob das Diagramm eine Rotationsanimation haben soll. In ähnlicher Weise können Sie auch den animateScale -Schlüssel verwenden, um anzugeben, ob das Ringdiagramm aus der Mitte skaliert werden sollte. Der Wert von animateRotate ist standardmäßig true , und der Wert von animateScale ist standardmäßig false .

Wie üblich können Sie backgroundColor , borderColor und borderWidth verwenden, um die Hintergrundfarbe, die Randfarbe und die Grenzbreite aller Datenpunkte zu steuern. Ebenso können die Schwebewerte für all diese Eigenschaften mithilfe hoverBackgroundColor , hoverBorderColor und hoverBorderWidth gesteuert werden.

Im Folgenden ist der Code zum Erstellen eines Ringdiagramms für die obigen Daten. Stellen Sie den Wert der rotation auf -90 ein, um den Startpunkt auf 90 Grad gegen den Uhrzeigersinn zu drehen.

 var oildata = {
  Labels: ["Saudi -Arabien", "Russland", "Irak", "VAE", "Kanada"],
  Datensätze: [
    {
      Daten: [133.3, 86,2, 52,2, 51,2, 50,2],
      BackgroundColor: ["#ff6384", "#63ff84", "#84ff63", "#8463ff", "#6384ff"],
      BorderColor: "Schwarz",
      Grenzbreite: 2
    }
  ]
};

var chartopions = {
  Rotation: -90,
  Ausschnitt: "45%",
  Plugins: {
    Titel: {
      Anzeige: wahr,
      Position: "unten",
      Text: "Major Oil Exporteure im Jahr 2015",
      Schriftart: {
        Größe: 32
      }
    },
    Legende: {
      Position: "links",
      Ausrichtung: "Start"
    }
  },
  Animation: {
    Animaterotate: Falsch,
    AnimatesCale: Richtig
  }
};

var donutchart = neuer Diagramm (Oilcanvas, {
  Typ: "Donut",
  Daten: oildata,
  Optionen: Diagramme
}); 

Erstellen Sie ein Blasendiagramm

Blasendiagramme werden verwendet, um drei Datenabmessungen in einem Diagramm zu zeichnen oder anzuzeigen ( P1 , P2 , P3 ). Die Position und Größe der Blase bestimmen die Werte dieser drei Datenpunkte. Die horizontale Achse repräsentiert den ersten Datenpunkt (P1), die vertikale Achse repräsentiert den zweiten Datenpunkt ( P2 ), und der Bereich der Blase wird verwendet, um den Wert des dritten Datenpunkts ( P3 ) darzustellen.

Es ist zu beachten, dass die Größe des dritten Datenpunkts nicht durch den Radius der Blasen, sondern durch ihren Bereich dargestellt wird. Die Fläche des Kreises ist proportional zum Quadrat des Radius. Dies bedeutet, dass Sie sicherstellen müssen, dass der von Ihnen gezeichnete Blasenradius proportional zur Quadratwurzel der Größe des dritten Datenpunkts ist.

In Diagramm.js können Sie ein Blasendiagramm erstellen, indem Sie den Wert des type -Taste für bubble festlegen. Hier ist ein Beispiel dafür, wie man ein Bubble -Diagramm erstellt:

 var bubblechart = neues Diagramm (popcanvas, {
    Typ: 'Bubble',
    Daten: Popdata,
    Optionen: Diagramme
});

Verwenden wir Blasendiagramme, um das Gewicht verschiedener Elemente im Raum zu zeichnen. Die Daten des Diagramms müssen im Objektformat übergeben werden. Das Datenobjekt muss über die folgende Schnittstelle verfügen, um korrekt zu zeichnen.

 {
    X:<number> Anwesend
    y:<number> Anwesend
    R:<number>
}</number></number></number>

Ein wichtiger Unterschied zwischen einem Blasendiagramm und allen anderen Diagrammen besteht darin, dass der Blasenradius nicht mit dem Diagramm skaliert wird.

Beispielsweise nimmt die Breite eines Balkens in einem Balkendiagramm entsprechend der Größe des Diagramms zu oder nimmt ab. Dies wird mit dem Blasendiagramm nicht passieren. Der Radius der Blase entspricht immer der genauen Anzahl der von Ihnen angegebenen Pixel. Dies ist sinnvoll, da in diesem Diagrammtyp der Radius tatsächlich verwendet wird, um die realen Daten darzustellen.

Lassen Sie uns ein Blasendiagramm erstellen, um die Anzahl der Hirschherden an verschiedenen Stellen im Wald zu zeichnen.

 var popdata = {
  Datensätze: [
    {
      Etikett: ["Hirschherde"],
      Daten: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25},
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      BackgroundColor: "#ff9966"
    }
  ]
};

Da der Radius hier proportional zur Quadratwurzel der tatsächlichen Zahl ist, beträgt die Anzahl der Hirsche bei (80, 80) die 36 -fache der Anzahl der Hirsche bei (0, 100).

Wie alle anderen Diagrammtypen können Sie backgroundColor , borderColor und borderWidth verwenden, um die Hintergrundfarbe, die Grenzfarbe und die Grenzbreite der gezeichneten Punkte zu steuern. In ähnlicher Weise können Sie auch hoverBackgroundColor , hoverBorderColor und hoverBorderWidth -Schlüssel verwenden, um die Farbfarbe der Hover -Hintergrund, die Hover -Rand -Farbe und die Hover -Randbreite anzugeben.

Sie können auch hoverRadius verwenden, um den zusätzlichen Radius beim Schweben verschiedene Blasen hinzuzufügen. Denken Sie daran, dass dieser Radius dem ursprünglichen Wert hinzugefügt wird, um die schwebende Blase zu zeichnen. Wenn der Radius der ursprünglichen Blase 10 beträgt und hoverRadius auf 5 eingestellt ist, beträgt der Radius der Blase auf der Schwebefläche 15.

 var popdata = {
  Datensätze: [
    {
      Etikett: ["Hirschherde"],
      Daten: [
        {x: 100, y: 0, r: 10},
        {x: 60, y: 30, r: 20},
        {x: 40, y: 60, r: 25}
      ],
      BackgroundColor: "#9966ff",
      HoverbackgroundColor: "#fffff",
      HoverborderColor: "#9966ff",
      Hoverborderwidth: 5,
      Hoverradius: 5
    },
    {
      Etikett: ["Giraffe -Nummer"],
      Daten: [
        {x: 80, y: 80, r: 30},
        {x: 20, y: 30, r: 25},
        {x: 0, y: 100, r: 5}
      ],
      BackgroundColor: "#ff6600",
      HoverbackgroundColor: "#fffff",
      HoverborderColor: "#ff6600",
      Hoverborderwidth: 5,
      Hoverradius: 5
    }
  ]
};

var chartopions = {
  Plugins: {
    Titel: {
      Anzeige: wahr,
      Position: "unten",
      Text: "Anzahl der Tiere in verschiedenen Hotspots",
      Schriftart: {
        Größe: 20
      }
    },
    Legende: {
      Position: "unten",
      Ausrichtung: "Zentrum"
    }
  },
  Layout: {
    Polsterung: 20
  }
};

Die obigen Parameter erstellen das folgende Blasendiagramm.

Zusammenfassen

In diesem Tutorial haben Sie drei weitere in Diagramm.js verfügbare Diagrammtypen gelernt. Sie sollten nun in der Lage sein, den entsprechenden Diagrammtyp auszuwählen, um die Daten zu zeichnen und bestimmte Werte für verschiedene Schlüssel festzulegen, um das Erscheinungsbild zu steuern. Im nächsten Tutorial lernen Sie, wie Sie Skalen für verschiedene Diagrammtypen manipulieren.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Chart.js: Kuchen-, Donut- und Bubble -Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!