Erste Schritte mit Diagramm.js: Radar- und Polar Area -Diagramme

Dieses Tutorial erweitert die vorherige Tabelle.JS -Lektion, die Linien- und Balkendiagramme umfasste. Hier untersuchen wir Radar- und Polar Area -Diagramme und bieten einen kurzen Überblick, gefolgt von einer detaillierten Erklärung.

Radardiagramme verstehen

Zeilen- und Balkendiagramme zeichnen sich aus, um ein oder zwei Attribute über zahlreiche Datenpunkte hinweg zu vergleichen (z. B. Bevölkerung in asiatischen Ländern). Wenn jedoch viele Attribute von nur wenigen Datenpunkten (z. B. Eigenschaften von drei Flüssigkeiten) verglichen werden, ist ein Radardiagramm weitaus effektiver. Auch als Spinnendiagramm bezeichnet, visualisiert und vergleicht es mehrere Variablen effizient und vergleicht sie.

Wie durch Wikipedia definiert, repräsentiert ein Radardiagramm grafisch multivariate Daten unter Verwendung von Achsen, die aus einem zentralen Punkt stammen. Die Winkel und relativen Positionen der Achsen sind im Allgemeinen nicht signifikant.

Erstellen wir unser erstes Radardiagramm. Wir erreichen dies, indem wir 'r' als unsere Skalentaste innerhalb des 'x' oder 'Winkelschlüssels zu' Falsch 'festlegen. In ähnlicher Weise erfolgt das Deaktivieren der Rotationsanimation durch Einstellen von Animaterotate auf "False" im Objekt "Animation".

Der folgende Code verbessert die visuelle Anziehungskraft des Diagramms:

 var chartopions = {
  Plugins: {
    Titel: {
      Anzeige: wahr,
      Position: "unten",
      Text: "Zugvögel in verschiedenen Jahreszeiten"
    },
    Legende: {
      Ausrichtung: "Zentrum",
      Position: "links",
      Labels: {
        Schriftart: {
          Größe: 16
        }
      }
    }
  },
  Animation: {
    Animaterotate: Falsch
  },
  Waage: {
    R: {
      Zecken: {
        Schriftart: {
          Größe: 16
        },
        Farbe: "Weiß",
        Backdropcolor: "Schwarz"
      }
    }
  },
  Elemente: {
    Bogen: {
      Winkel: 180,,
      BorderColor: "Schwarz"
    }
  }
};

Über die Animationskontrolle hinaus haben wir die Legende nach links neu positioniert und die Lesbarkeit der Tabelle verbessert.

Abschluss

In diesem Tutorial wurde die praktischen Anwendungen von Radar- und Polarbereichstabellen gezeigt und wie die Konfigurationsoptionen von Chart.JS erstellt und angepasst werden. Zukünftige Tutorials werden Kuchen-, Donut- und Bubble -Charts abdecken. Weitere JavaScript -Ressourcen und Frameworks finden Sie unter Envato Market.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Diagramm.js: Radar- und Polar Area -Diagramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!