So verwenden Sie horizontale Liniendiagramme zur Anzeige von Daten in Highcharts

Highcharts ist eine sehr beliebte JavaScript-Diagrammbibliothek, die mehrere Diagrammtypen zur Anzeige von Daten unterstützt. Unter diesen ist das horizontale Liniendiagramm ein häufig verwendeter Diagrammtyp, mit dem die horizontale Position eines bestimmten Werts in den Daten angezeigt wird.

In diesem Artikel wird erläutert, wie Sie horizontale Liniendiagramme in Highcharts zum Anzeigen von Daten verwenden, und es werden spezifische Codebeispiele bereitgestellt. Im Folgenden sind die Schritte aufgeführt:

Schritt 1: Daten vorbereiten

Zuerst müssen Sie die Daten vorbereiten, z. B. die folgenden Daten:

var data = [{
    name: 'Apple',
    value: 85
}, {
    name: 'Orange',
    value: 65
}, {
    name: 'Banana',
    value: 45
}, {
    name: 'Grape',
    value: 30
}, {
    name: 'Lemon',
    value: 15
}];

In den obigen Daten steht „Name“ für den Namen der horizontalen Linie und „Wert“ für die Wert der horizontalen Linie. Hier verwenden wir 5 Arten horizontaler Linien, die je nach Bedarf vergrößert oder verkleinert werden können.

Schritt 2: Erstellen Sie einen Container

Erstellen Sie einen HTML-Container, um Highcharts-Diagramme zu platzieren. Zum Beispiel:

<div id="container"></div>

Schritt 3: Führen Sie die Highcharts-Bibliothek ein.

Führen Sie die Highcharts-Bibliothek in die HTML-Seite ein. Zum Beispiel:

<script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>

Schritt 4: Highcharts-Konfiguration schreiben

Highcharts-Konfiguration in eine JavaScript-Datei schreiben, einschließlich Titel, Daten, X-Achse, Y-Achse usw. des horizontalen Liniendiagramms. Der Typ des horizontalen Liniendiagramms ist xrange. Der spezifische Konfigurationscode lautet wie folgt:

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Horizontal Line Chart'
    },
    xAxis: {
        categories: ['Value'],
    },
    yAxis: {
        title: {
            text: ''
        },
        reversed: true,
        maxPadding: 0.1,
        min: 0,
        max: 100,
    },
    legend: {
        enabled: false
    },
    series: [{
        name: 'Value',
        data: data,
        borderRadius: 5,
        borderColor: '#cccccc',
        borderWidth: 1,
        pointWidth: 20
    }]
});

In der obigen Konfiguration ist der Diagrammtyp xrange, was bedeutet, dass ein horizontales Liniendiagramm generiert wird. title stellt den Diagrammtitel dar, xAxis stellt die x-Achse dar und es gibt nur ein „Wert“-Element in den Kategorien, da es im horizontalen Liniendiagramm nur eine x-Achse gibt. yAxis stellt die y-Achse dar, reversed stellt das Umdrehen der y-Achse dar, sodass der höchste Wert oben liegt; maxPadding stellt den Anteil des verbleibenden Raums oberhalb und unterhalb der y-Achse dar, und min und max stellen die minimalen und maximalen Werte dar ​der y-Achse. legend stellt die Legende dar, die hier nicht benötigt wird, daher ist sie auf false gesetzt. series stellt die Datenreihe dar, wobei name der Name der Datenreihe, data die Daten, borderRadius den Randrundungsradius, borderColor die Randfarbe, borderWidth die Randbreite und pointWidth die Breite der horizontalen Linie darstellt.

Schritt 5: Diagramm anzeigen

Zum Schluss die Highcharts-Konfiguration in der HTML-Seite aufrufen und das Diagramm im Container anzeigen.

Highcharts.chart('container', options);

Der vollständige Code lautet wie folgt:

    
    <script src="https://cdn.jsdelivr.net/npm/highcharts@9.1.1/highcharts.js"></script>


    <div id="container"></div>

    <script>
        var data = [{
            name: 'Apple',
            value: 85
        }, {
            name: 'Orange',
            value: 65
        }, {
            name: 'Banana',
            value: 45
        }, {
            name: 'Grape',
            value: 30
        }, {
            name: 'Lemon',
            value: 15
        }];

        var options = {
            chart: {
                type: 'xrange'
            },
            title: {
                text: 'Horizontal Line Chart'
            },
            xAxis: {
                categories: ['Value']
            },
            yAxis: {
                title: {
                    text: ''
                },
                reversed: true,
                maxPadding: 0.1,
                min: 0,
                max: 100
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Value',
                data: data,
                borderRadius: 5,
                borderColor: '#cccccc',
                borderWidth: 1,
                pointWidth: 20
            }]
        };

        Highcharts.chart('container', options);
    </script>

Die oben genannten Schritte sind alle Schritte, um das horizontale Liniendiagramm in Highcharts zum Anzeigen von Daten zu verwenden. Ich hoffe, hilfreich zu sein.

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