So erstellen Sie ein Thermometerdiagramm mit Highcharts

Highcharts ist eine beliebte JavaScript-Diagrammbibliothek, die zum Erstellen einer Vielzahl von Symbolen, einschließlich Thermometerdiagrammen, verwendet werden kann. In diesem Artikel wird erläutert, wie Sie mit Highcharts ein einfaches Thermometerdiagramm erstellen, und es werden spezifische Codebeispiele bereitgestellt.

1. Vorbereitung

Zuerst müssen Sie die Highcharts-Bibliothek von der offiziellen Highcharts-Website (https://www.highcharts.com/download) herunterladen und die relevanten JavaScript- und CSS-Dateien in die Webseite einfügen.

2. Erstellen Sie das HTML-Element

Als nächstes erstellen Sie ein div-Element in der HTML-Datei, das das Thermometerdiagramm enthalten soll:

3. Konfigurieren Sie das Thermometerdiagramm

Um das Thermometerdiagramm zu erstellen, müssen Sie Highcharts bereitstellen mit einigen Daten- und Konfigurationsoptionen. Hier ist ein einfaches Beispiel:

var options = {

chart: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0 ,

plotShadow: false

},

title: {

text: 'Temperatur'

},

pane: {

startAngle: -150,

endAngle: 150,

ground: [
{
backgroundColor: {

            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#FFF'],
                [1, '#333']
            ]
        },
        borderWidth: 0,
        outerRadius: '109%'
    },
    {
        backgroundColor: {
            linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
            stops: [
                [0, '#333'],
                [1, '#FFF']
            ]
        },
        borderWidth: 1,
        outerRadius: '107%'
    },
    {
        // default background
    },
    {
        backgroundColor: '#DDD',
        borderWidth: 0,
        outerRadius: '105%',
        innerRadius: '103%'
    }
]

},

// die Wertachse
yAxis: {

min: -20,
max: 40,

minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',

tickInterval: 10,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 12,
tickColor: '#666',
labels: {
    step: 2,
    rotation: 'auto'
},
title: {
    text: '°C'
},
plotBands: [{
    from: -20,
    to: 0,
    color: '#9CCC65' // green
}, {
    from: 0,
    to: 10,
    color: '#FFEB3B' // yellow
}, {
    from: 10,
    to: 20,
    color: '#FFC107' // orange
}, {
    from: 20,
    to: 30,
    color: '#FF5722' // red
}, {
    from: 30,
    to: 40,
    color: '#F44336' // dark red
}]

},

series: [{

name: 'Temperature',
data: [20],
tooltip: {
    valueSuffix: ' °C'
}

}]

};

Das Wichtigste ist Fenster, Es definiert die inneren und äußeren Hintergrundfarben, die Rahmenbreite und andere Stile. Unter anderem definiert plotBands die Farbe des Temperaturintervalls. Die folgende y-Achse definiert die Skala und andere Stile des Thermometers, und der Anfangswert des Thermometers wird in der Reihe festgelegt.

4. Rendern Sie das Thermometerdiagramm

Zum Schluss rufen Sie die Funktion chart() und das Optionsobjekt von Highcharts auf, um das Thermometerdiagramm zu rendern:

var chart = new Highcharts.Chart(options);

Vollständiger Code:

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Thermometerdiagramm mit Highcharts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!