Chart.jsのグラフに横線を入れる方法

横線正式にはなんと言うのか分かりません。
例えば気温を示す折れ線グラフに、横線で平均気温を表示するようなイメージです。

ここにチャート表示
目次

プラグイン chartjs-plugin-annotation を使う

Chart.jsには様々なプラグインが用意されています。
グラフ内にデータ以外の線を引いたり、四角で囲ったりするにはプラグイン「chartjs-plugin-annotation」を使用します。
chartjs-plugin-annotation

1.プラグインを読み込む

プラグイン「chartjs-plugin-annotation」をインクルードします。
<head>内や</body>の前など、ご自身の環境に合わせてください。
Chart.js本体よりも下に記述してください。

2.y軸に id を付与

id で区別された y軸(x軸)を基準にして線が引かれるので、y軸(x軸)に id を付けます。
両側のy軸を使用する複合グラフの場合は、それぞれの軸に一意の id を付けます。

options.scales.xAxes または options.scales.yAxes です。

options: { 
            // 省略
            scales: {
                xAxes: [{
                    id: 'X軸', // id名
                    // 以下省略
                }],
                yAxes: [
                    {
                        id: 'y左軸', // id名
                        // 以下省略
                    }
                ]
            },
            // 以下省略

3.annotation を設定

「options」にプラグインの設定を記述します。

options: {
    // 省略
    scales: {
        xAxes: [{
            id: 'X軸', // id名
            // 以下省略
        }],
        yAxes: [
            {
                id: 'y左軸', // id名
                // 以下省略
            }
        ]
    },
    // ここから
    annotation: {
        annotations: [
            {
                type: 'line', // 線分を指定
                drawTime: 'afterDatasetsDraw',
                id: 'a-line-1', // 線のid名を指定(他の線と区別するため)
                mode: 'horizontal', // 水平を指定
                scaleID: 'y左軸', // 基準とする軸のid名
                value: 15.6, // 引きたい線の数値(始点)
                endValue: 15.6, // 引きたい線の数値(終点)
                borderColor: 'red', // 線の色
                borderWidth: 3, // 線の幅(太さ)
                borderDash: [2, 2],
                borderDashOffset: 1,
                label: { // ラベルの設定
                    backgroundColor: 'rgba(255,255,255,0.8)',
                    bordercolor: 'rgba(200,60,60,0.8)',
                    borderwidth: 2,
                    fontSize: 10,
                    fontStyle: 'bold',
                    fontColor: 'rgba(200,60,60,0.8)',
                    xPadding: 10,
                    yPadding: 10,
                    cornerRadius: 3,
                    position: 'left',
                    xAdjust: 0,
                    yAdjust: 0,
                    enabled: true,
                    content: '平均気温(2019) 15.6℃'
                }
            },
            {
                type: 'line', // 線分を指定
                drawTime: 'afterDatasetsDraw',
                id: 'a-line-2', // 線のid名を指定(他の線と区別するため)
                mode: 'horizontal', // 水平を指定
                scaleID: 'y左軸', // 基準とする軸のid名
                value: 13.7, // 引きたい線の数値(始点)
                endValue: 13.7, // 引きたい線の数値(終点)
                borderColor: 'rgba(60,200,60,0.8)', // 線の色
                borderWidth: 3, // 線の幅(太さ)
                borderDash: [2, 2],
                borderDashOffset: 1,
                label: { // ラベルの設定
                    backgroundColor: 'rgba(255,255,255,0.8)',
                    bordercolor: 'rgba(60,200,60,0.8)',
                    borderwidth: 2,
                    fontSize: 10,
                    fontStyle: 'bold',
                    fontColor: '#333',
                    xPadding: 10,
                    yPadding: 10,
                    cornerRadius: 3,
                    position: 'left',
                    xAdjust: 0,
                    yAdjust: 0,
                    enabled: true,
                    content: '平均気温(1919) 13.7℃'
                }
            }
        ]
    }
    // ここまで
}

2軸にしたい(右側のy軸も使用)場合

・「yAxes」を追加(1つ目のy軸と異なる id名にする)
・「annotations」を追加(id名を揃える)

グラフに四角形を表示したい

プラグイン chartjs-plugin-annotation を使うと、グラフ内に四角形を表示させることもできます。
データの範囲を強調したい場合などに使えます。

ここにチャート表示
annotation: {
    annotations: [{
        type: 'box', // 矩形を指定
        drawTime: 'afterDatasetsDraw',
        id: 'a-box-1', // 矩形のid名を指定(他と区別するため)
        xScaleID: 'X軸', // 基準とするx軸のid名
        yScaleID: 'y左軸',// 基準とするy軸のid名
        xMin: 1.5, // 基準とするx軸の値(始点)
        xMax: 8.5, // 基準とするx軸の値(終点)
        yMin: 0, // 基準とするy軸の値(始点)
        yMax: 100, // 基準とするy軸の値(終点)
        backgroundColor: 'rgba(100,100,180,.2)',
        borderWidth: 0,
        borderColor: 'rgba(180,100,180,0)'
    }]
},

「annotations」を増やせば、横線と四角を両方表示することも可能です。

Chart.jsは基本設定やプラグインの設定が多く最初は戸惑いますが、基本仕様が分かってくればどんどん応用できます。
データを見える化することで、情報をよりわかりやすく伝えることができるようになりますよ。

【参考】
chartjs-plugin-annotation
chartjs-plugin-annotation sandbox
How to create a line on a chart using chartjs-plugin-annotation

【Chart.jsに関する記事まとめ】

よかったらシェアしてください!
  • URL Copied!

コメント

コメントする

CAPTCHA


目次
閉じる