How to create a thermometer chart using Highcharts

Highcharts is a popular JavaScript charting library that can be used to create a variety of icons, including thermometer charts. This article will introduce how to use Highcharts to create a simple thermometer chart and provide specific code examples.

1. Preparation work

First, you need to download the Highcharts library from the Highcharts official website (https://www.highcharts.com/download) and introduce the relevant information into the web page JavaScript and CSS files.

2. Create HTML Element

Next, create a div element in the HTML file to hold the thermometer chart:

3. Configure the Thermometer Chart

In order to create a thermometer chart, you need to provide Highcharts with some data and configuration options. Here is a simple example:

var options = {

chart: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0,

plotShadow: false

},

title: {

text: 'Temperature'

},

pane: {

startAngle: -150,

endAngle: 150,

background: [
{
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%'
    }
]

},

// the value axis
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'
}

}]

};

The most important thing is pane, which defines The inner and outer background colors, border width and other styles have been changed. Among them, plotBands defines the color of the temperature interval. The following yAxis defines the scale and other styles of the thermometer, and the initial value of the thermometer is set in the series.

4. Rendering the thermometer chart

Finally, call the chart() function and options object of Highcharts to render the thermometer chart:

var chart = new Highcharts. Chart(options);

Full code:

The above is the detailed content of How to create a thermometer chart using Highcharts. For more information, please follow other related articles on the PHP Chinese website!