四日市の気温

折れ線グラフの基本の形です。右クリックでソースを見たら、ある程度は推測できるはずです。

データは気温と雨量の統計の「三重県四日市の気温、降水量、観測所情報」を参照しました。

解説

はじめに，何のグラフを使うのか宣言します。単純な折れ線グラフなら line，単純な棒グラフならbarと書きます。ここでは，折れ線グラフなので，lineと書いています。

chart: {
    type: 'line'
}

X軸の設定

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}

Y軸の設定

yAxis: {
    title: {
        text: 'Temperature (°C)'
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }]
}

最初の title:{text: '...'}でY軸ラベルの設定をしています。

plotLines:[{...}] では複数の要素が入っています。value は基点の値で、この場合は、0（ゼロ）を基点に設定しています。width は基点の線の外枠の太さを設定しています。color は外枠の色です。redといった表記でも構いません。

ここではY軸の数字は例えば，10，20というように数字だけになっていますが，これを 10°のように表示させたいのであれば，次のようにします。

title: {
    text: 'Temperature'
},
labels: {
    formatter: function () {
        return this.value + '°';
    }
}

labels: {....} の部分が肝です。

データ

series: [{
    name: '最高気温',
    data: [8.6, 9.5, 12.3, 18.3, 22.5, 25.7, 29.4, 30.9, 27.3, 22.0, 16.7, 11.3]
}, {
    name: '平均気温',
    data: [4.0, 4.6, 7.6, 13.2, 17.6, 21.5, 25.1, 26.4, 23.0, 16.9, 11.6, 6.4]
}, {
    name: '最低気温',
    data: [-0.3, -0.3, 2.6, 7.7, 12.8, 17.6, 21.7, 22.8, 19.2, 12.3, 6.8, 1.8]
}]

{name: '系列A', data[値1, 値2, ...]} で一つのデータ系列になっています。color: '色コード（色名）'を入れることで，系列ごとの色を設定できます。省略すると，自動的に色が設定されます（サンプルでは，3系列ともに，色を設定しています。右クリックして確認してみて下さい）。

リンクはご自由にどうぞ。

【石田修二】　　【Highcharts】