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!