Comment créer un graphique de thermomètre à l'aide de Highcharts

Highcharts est une bibliothèque de graphiques JavaScript populaire qui peut être utilisée pour créer une variété d'icônes, y compris des graphiques de thermomètres. Cet article explique comment utiliser Highcharts pour créer un graphique de thermomètre simple et fournit des exemples de code spécifiques.

1. Préparation

Tout d'abord, vous devez télécharger la bibliothèque Highcharts depuis le site officiel de Highcharts (https://www.highcharts.com/download) et introduire les fichiers JavaScript et CSS pertinents dans la page Web.

2. Créez l'élément HTML

Ensuite, créez un élément div dans le fichier HTML qui hébergera le graphique du thermomètre :

3. Configurez le graphique du thermomètre

Afin de créer le graphique du thermomètre, vous devez fournir des Highcharts avec quelques données et options de configuration. Voici un exemple simple :

var options = {

chart: {

renderTo: 'container',

type: 'jauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0 ,

plotShadow: false

},

title: {

text: 'Temperature'

},

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%'
    }
]

},

// l'axe des valeurs
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
}]

},

série : [{

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

}]

} ;

La chose la plus importante est le volet, Il définit les couleurs d’arrière-plan intérieures et extérieures, la largeur des bordures et d’autres styles. Parmi eux, plotBands définit la couleur de l'intervalle de température. L'axe y suivant définit l'échelle et les autres styles du thermomètre, et la valeur initiale du thermomètre est définie dans la série.

4. Rendu le graphique du thermomètre

Enfin, appelez la fonction chart() et l'objet options de Highcharts pour restituer le graphique du thermomètre :

var chart = new Highcharts.Chart(options);

Code complet :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!