Highcharts を使用して温度計グラフを作成する方法

Highcharts は、温度計グラフなどのさまざまなアイコンの作成に使用できる、人気のある JavaScript グラフ作成ライブラリです。この記事では、Highcharts を使用して単純な温度計グラフを作成する方法を紹介し、具体的なコード例を示します。

1. 準備作業

まず、Highcharts 公式 Web サイト (https://www.highcharts.com/download) から Highcharts ライブラリをダウンロードし、関連情報を Web ページの JavaScript および CSS ファイルに組み込みます。

2. HTML 要素の作成

次に、温度計チャートを保持するための div 要素を HTML ファイルに作成します。

3. 温度計チャートを構成する

温度計グラフを作成するには、Highcharts にいくつかのデータと構成オプションを提供する必要があります。簡単な例を次に示します。

var options = {

chart: {

renderTo: 'container',

type: 'gauge',

plotBackgroundColor: null,

plotBackgroundImage: null,

plotBorderWidth: 0,

plotShadow: false

},

title: {

text: '温度'

},

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

},

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

}]

};

最も重要なのはペインです。内側と外側の背景色、境界線の幅などのスタイルが変更されました。このうち、plotBands は温度間隔の色を定義します。次の y 軸は温度計のスケールとその他のスタイルを定義し、温度計の初期値が系列に設定されます。

4. 温度計チャートのレンダリング

最後に、Highcharts の chart() 関数とオプション オブジェクトを呼び出して、温度計チャートをレンダリングします。

var chart =新しいハイチャート。チャート(オプション);

完全なコード:

以上がHighcharts を使用して温度計グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。