Erste Schritte mit Chart.js: Achsen und Skalen

In den ersten vier Tutorials haben Sie viel über Chart.js gelernt. Nach dem Lesen der ersten vier Tutorials sollten Sie in der Lage sein, Tooltips und Tags anzupassen, Schriftarten zu ändern und verschiedene Arten von Diagrammen zu erstellen. Diese Reihe von Tutorials hat noch keinen Aspekt von Chart.js: Achse und Skala eingeführt.

Die Skala hat sich seit der V1.0 -Version der Bibliothek stark verändert und ist jetzt leistungsfähiger. In diesem Tutorial lernen Sie, wie Sie die Skala manipulieren und die verschiedenen Optionen der Bibliothek verwenden, um ihr Erscheinungsbild zu steuern.

Ändern Sie Gitterlinien und Achsenbezeichnungen

Alle Konfigurationsoptionen für Gitterlinien sind unter scale Skalierungsoptionen für Titel- und Schriftschlüssel verschachtelt.

Nachfolgend finden Sie eine Tabelle derselben alten Autogeschwindigkeit, die mit einer Reihe verschiedener Diagrammoptionen angegeben ist.

 var chartopions = {
  Plugins: {
    Legende: {
      Anzeige: wahr,
      Position: 'Top',
      Labels: {
        Boxwidth: 50,
        Nutzungstyle: Richtig,
        PointStyle: "Linie"
      }
    }
  },
  Waage: {
    X: {
      Netz: {
        Anzeige: Falsch
      },
      Titel: {
        Anzeige: wahr,
        Text: "Zeit in Sekunden",
        Farbe: "Rot",
        Schriftart: {
          Größe: 24,
          Gewicht: "fett"
        }
      }
    },
    y: {
      Netz: {
        Farbe: "#ccc",
        Borderdash: [20, 4],
        BorderColor: "Schwarz",
        Tickcolor: "Schwarz"
      },
      Titel: {
        Anzeige: wahr,
        Text: "Geschwindigkeit in Meilen pro Stunde",
        Farbe: "grün",
        Schriftart: {
          Größe: 18,
          Gewicht: "fett"
        }
      }
    }
  }
}; 

Es gibt auch einen Schlüssel namens grid . Wenn Sie auf font einstellen.

Sie können auch den minimalen und maximalen Wert des Ticks unter Verwendung des Geräts auf den minimalen und maximalen Wert minute einstellen. Sie können displayFormats verwenden, um das Format anzugeben, in dem die Zeit in der Skala angezeigt wird.

Sie können auch die round Taste verwenden, um die Zeit zu dauern, bevor Sie ihn auf die Tabelle planen. Seien Sie vorsichtig, wenn Sie den Wert der round festlegen. Angenommen, Sie setzen seinen Wert auf hour und müssen zweimal auf der Tabelle zeichnen. Wenn einmal 5:30 Uhr und die andere Zeit 5:50 Uhr morgens ist, werden sie alle um 5:00 Uhr auf der Zeckenmarke gezogen. Wenn Sie seinen Wert auf minute setzen, zeichnen sie sie auf die Marker von 5:30 bzw. 5:50.

Sie können den folgenden Code verwenden, um ein Zeilendiagramm zu Beginn des Tutorials mit der Zeitskala zu zeichnen.

 var chartopions = {
  Plugins: {
    Legende: {
      Position: "Top",
      Labels: {
        Boxwidth: 50,
        Nutzungstyle: Richtig,
        PointStyle: "Linie",
      }
    }
  },
  Waage: {
    X: {
      Typ: "Zeit",
      Netz: {
        Tickcolor: "Green",
        Borderdash: [5, 2],
        tickwidth: 2,
        Farbe: Schwarz",
        BorderColor: "Schwarz",
      },
      Zeit: {
        Einheit: "Minute",
        Schritte: 30,
        TooltipFormat: "HH: mm a",
        DisplayFormats: {
          "Minute": "HH: MM A"
        }
      },
      Zecken: {
        Farbe: "grün",
        Schriftart: {
          Gewicht: "fett"
        }
      },
      Titel: {
        Anzeige: wahr,
        Text: "Zeit",
        Schriftart: {
          Gewicht: "fett",
          Größe: 22
        }
      }
    },
    y: {
      Netz: {
        Farbe: Schwarz",
        Borderdash: [5, 2,],
        BorderColor: "Schwarz",
        tickcolor: "rot",
        tickwidth: 2,
      },
      Zecken: {
        Farbe: "Rot",
        Schriftart: {
          Gewicht: "fett"
        }
      },
      Titel: {
        Anzeige: wahr,
        Text: "Geschwindigkeit (in mph)",
        Schriftart: {
          Gewicht: "fett",
          Größe: 22
        }
      }
    }
  }
}; 

Zusammenfassen

In diesem Tutorial können Sie die verschiedenen Arten von Zecken in Diagramm.js verstehen. Sie können die Skalen in Ihrem Diagramm nun einfach anpassen, indem Sie die Farbe, die minimalen und maximalen Werte der Skalen, die Anzahl der Skalen und andere solche Faktoren steuern.

Nachdem Sie alle fünf Tutorials in dieser Serie gelesen haben, sollten Sie in der Lage sein, alle Arten von Diagrammen zu erstellen, die in chart.js verfügbar sind. Ich hoffe, Sie haben dieses Tutorial und diese Serie genossen.

Wenn Sie nach anderen Lernressourcen oder Ressourcen suchen, die Sie bei der Arbeit nutzen können, lesen Sie die Ressourcen, die wir auf dem Envato -Markt anbieten.

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