首页 > 文章列表 > 如何使用Highcharts创建温度计图表

如何使用Highcharts创建温度计图表

Highcharts 图表 温度计
388 2023-12-17

Highcharts是一款流行的JavaScript图表库,可以用于创建各种图标,包括温度计图表。本文将介绍如何使用Highcharts创建一个简单的温度计图表,并提供具体的代码示例。

  1. 准备工作

首先,需要从Highcharts官方网站(https://www.highcharts.com/download)下载Highcharts库,并在网页中引入相关的JavaScript和CSS文件。

  1. 创建HTML元素

接下来,在HTML文件中创建一个div元素,用于容纳温度计图表:

  1. 配置温度计图表

为了创建温度计图表,需要为Highcharts提供一些数据和配置选项。下面是一个简单的示例:

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

}]

};

最重要的是pane,其中定义了内外背景颜色、边框宽度等样式。其中plotBands定义了温度区间的颜色。后面的yAxis定义了温度计的刻度等样式,series中设置了温度计的初始值。

  1. 渲染温度计图表

最后,调用Highcharts的chart()函数以及options对象,渲染温度计图表:

var chart = new Highcharts.Chart(options);

完整代码: