Cara membuat carta termometer menggunakan Highcharts

Highcharts ialah perpustakaan carta JavaScript yang popular yang boleh digunakan untuk mencipta pelbagai ikon, termasuk carta termometer. Artikel ini akan memperkenalkan cara menggunakan Highcharts untuk mencipta carta termometer ringkas dan memberikan contoh kod khusus.

1. Persediaan

Pertama, anda perlu memuat turun perpustakaan Highcharts dari tapak web rasmi Highcharts (https://www.highcharts.com/download) dan memperkenalkan fail JavaScript dan CSS yang berkaitan ke dalam halaman web.

2. Buat elemen HTML

Seterusnya, buat elemen div dalam fail HTML yang akan menempatkan carta termometer:

3. Konfigurasikan carta termometer

Untuk mencipta carta termometer, anda perlu menyediakan carta termometer. dengan beberapa pilihan data dan konfigurasi. Berikut ialah contoh mudah:

var options = {

carta: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage:

plotBackgroundImej:

plot

WplotBackground: ,

plotBayang: palsu

},

tajuk: {

teks: 'Suhu'

},

anak tetingkap: {

Sudut mula: -150,

{
warna latar belakang: {

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

},

// paksi nilai
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
}]

},

siri: [{

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

}], yang paling penting ialah pane Ia mentakrifkan warna latar belakang dalam dan luar, lebar sempadan dan gaya lain. Antaranya, plotBands mentakrifkan warna selang suhu. YAxis berikut mentakrifkan skala dan gaya lain bagi termometer, dan nilai awal termometer ditetapkan dalam siri.

Buat carta termometer

Akhir sekali, panggil fungsi carta() dan objek pilihan Carta Tinggi untuk memaparkan carta termometer:
4. carta var = Carta Tinggi baharu(pilihan);

Kod penuh:

Atas ialah kandungan terperinci Cara membuat carta termometer menggunakan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!