So verwenden Sie 3D-Diagramme zur Anzeige von Daten in Highcharts

Highcharts ist eine sehr beliebte JavaScript-Diagrammbibliothek, die viele verschiedene Arten von Diagrammen, einschließlich 3D-Diagramme, bereitstellt. In diesem Artikel wird detailliert beschrieben, wie 3D-Diagramme zur Anzeige von Daten in Highcharts verwendet werden, und es werden spezifische Codebeispiele bereitgestellt.

1. Einführung in die Highcharts-Bibliothek

Zuerst müssen wir die Highcharts-Bibliothek in die HTML-Datei einführen. Dies kann auf folgende Weise erreicht werden:

<script src="https://code.highcharts.com/highcharts.js"></script>

2. Daten vorbereiten

Wir müssen einige Daten für die Anzeige im 3D-Diagramm vorbereiten. Bei diesen Daten handelt es sich normalerweise um ein JavaScript-Objekt, das aus einem Array besteht. Zum Beispiel:

var data = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
   series: [{
       name: 'Tokyo',
       data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, {
       name: 'New York',
       data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, {
       name: 'Berlin',
       data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, {
       name: 'London',
       data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }]
};

Dieses Objekt enthält 4 verschiedene Datenreihen, jede Reihe enthält einen Namen und ein Array, jedes Element im Array stellt einen Datenpunkt dar.

3. 3D-Diagramm erstellen

Als nächstes können wir ein 3D-Diagramm erstellen. Zuerst müssen wir entscheiden, welche Art von Diagramm wir erstellen möchten. Highcharts bietet verschiedene Arten von 3D-Diagrammen, darunter 3D-Säulendiagramme, 3D-Streudiagramme, 3D-Zylinderdiagramme und 3D-Karten. In diesem Artikel erstellen wir ein 3D-Säulendiagramm mit dem folgenden Code:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        options3d: {
            enabled: true,
            alpha: 15,
            beta: 15,
            depth: 50,
            viewDistance: 25
        }
    },
    title: {
        text: 'Monthly Average Temperature'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: data.categories
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    series: data.series
});

Zuerst definieren wir im HTML-Dokument ein Div namens „container“, das das von uns erstellte Diagramm enthält.

Dann verwenden wir die Methode Highcharts.chart(), um das Diagramm zu erstellen. In den Diagrammoptionen stellen wir den Typ auf „Spalte“ ein, was bedeutet, dass wir ein Säulendiagramm erstellen. Wir legen außerdem die Option „options3d“ fest, aktivieren die 3D-Funktionalität und legen einige 3D-Parameter wie Alpha- und Betawinkel, Tiefe und mehr fest.

Wir haben außerdem einige Titel- und Achsenoptionen sowie die Spaltenoption in plotOptions definiert, um die Tiefe des Säulendiagramms festzulegen.

Abschließend geben wir die Datenreihe an und verwenden das zuvor definierte Datenobjekt, um den Namen und die Daten jeder Reihe festzulegen.

4. Führen Sie den Code aus

Jetzt haben wir den Code fertig und können ihn im Browser ausführen. Wenn wir die HTML-Datei laden und das Diagramm anzeigen, sehen wir ein 3D-Säulendiagramm, das die Durchschnittstemperatur für jeden Monat anhand der zuvor definierten Daten anzeigt.

Codebeispiele können im folgenden Code-Repository eingesehen werden:

https://github.com/Jackie199199/Highcharts-3D-Demo

Summary

Highcharts ist eine sehr leistungsstarke JavaScript-Diagrammbibliothek, die eine Vielzahl verschiedener Diagramme bereitstellt Typen und Funktionen, einschließlich 3D-Diagramme. In diesem Artikel erklären wir, wie Sie 3D-Diagramme in Highcharts erstellen und stellen konkrete Codebeispiele bereit. Wenn Sie Ihrer Webseite oder Anwendung eine hochwertige, interaktive Datenvisualisierung hinzufügen möchten, ist Highcharts möglicherweise eine Ihrer besten Optionen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie 3D-Diagramme zur Anzeige von Daten in Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!