横線正式にはなんと言うのか分かりません。
例えば気温を示す折れ線グラフに、横線で平均気温を表示するようなイメージです。
プラグイン chartjs-plugin-annotation を使う
Chart.jsには様々なプラグインが用意されています。
グラフ内にデータ以外の線を引いたり、四角で囲ったりするにはプラグイン「chartjs-plugin-annotation」を使用します。
chartjs-plugin-annotation
１．プラグインを読み込む
プラグイン「chartjs-plugin-annotation」をインクルードします。
<head>内や</body>の前など、ご自身の環境に合わせてください。
Chart.js本体よりも下に記述してください。
２．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名
// 以下省略
}
]
},
// 以下省略３．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に関する記事まとめ】
コメント