Highcharts は、温度計グラフなどのさまざまなアイコンの作成に使用できる、人気のある JavaScript グラフ作成ライブラリです。この記事では、Highcharts を使用して単純な温度計グラフを作成する方法を紹介し、具体的なコード例を示します。
まず、Highcharts 公式 Web サイト (https://www.highcharts.com/download) から Highcharts ライブラリをダウンロードし、関連情報を Web ページの JavaScript および CSS ファイルに組み込みます。
次に、温度計チャートを保持するための div 要素を HTML ファイルに作成します。
温度計グラフを作成するには、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 軸は温度計のスケールとその他のスタイルを定義し、温度計の初期値が系列に設定されます。
最後に、Highcharts の chart() 関数とオプション オブジェクトを呼び出して、温度計チャートをレンダリングします。
var chart =新しいハイチャート。チャート(オプション);
完全なコード:
以上がHighcharts を使用して温度計グラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。