「システムオーダーする人って、グラフ表示に異常にこだわるよね」と心のなかで思った、ユゲタです。
最近仕事でよく使っているChart.jsで、色々とビジュアル対応をしたので、その備忘録です。
これらの方法で挫折している人もいるのと、相変わらずChart.jsのver3情報が少なかったので、役に立つ人も多いかも・・・
ということで、少しシリーズ化して、サンプルを加えて、スニペットを掲載していきたいと思います。
【お断り】
このブログ記事は、Chart.jsの標準的な使い方ができる人が対象です。
Char.jsの基本設定などは、本家サイトのサンプルなどで使える人を対象にしていますので、下記リンクから環境を作ってから本ページを参照ください。
Chart.js
サンプルグラフ
グラフ内の特定Y軸に任意の線を引く方法
(function(){
function MAIN(){
this.colors = [
"rgba(255,0,0,0.5)",
"rgba(0,255,0,0.5)",
"rgba(0,0,255,0.5)",
"rgba(255,255,0,0.5)",
"rgba(0,255,255,0.5)",
"rgba(0,0,0,0.5)",
"rgba(255,0,255,0.5)"
];
this.view_chart();
}
MAIN.prototype.view_chart = function(){
// graph-1
let canvas_1 = document.getElementById("graph_1");
if(canvas_1){
let col_num = 1;
// setting
let ctx = canvas_1.getContext('2d');
let labels = [1,2,3,4,5];
let datas = [];
for(let i=0; i<labels.length; i++){
datas.push(Math.floor(Math.random() * 10));
}
let datasets = [
{
data : datas,
borderColor : this.colors[col_num],
backgroundColor : this.colors[col_num],
label : "graph-1"
}
];
let options = {
responsive: true
};
// view
this.chart_1 = new Chart(ctx, {
type : "line",
data : {
labels : labels,
datasets : datasets
},
options : options,
plugins: [{
beforeDraw : this.chart_plugin.bind(this)
}]
});
}
};
MAIN.prototype.chart_plugin = function(target){
let ctx = target.ctx;
// 線を引くX軸の値
let x_num = 3;
let xscale = target.scales["x"];
let x_pos = xscale.getPixelForValue(x_num);
ctx.beginPath();
ctx.strokeStyle = "blue" ;
ctx.moveTo(x_pos , target.chartArea.top);
ctx.lineTo(x_pos , target.chartArea.bottom);
ctx.closePath();
ctx.stroke();
// 線を引くY軸の値
let y_num = 5;
let yscale = target.scales["y"];
let y_pos = yscale.getPixelForValue(y_num);
ctx.beginPath();
ctx.strokeStyle = "black" ;
ctx.moveTo(target.chartArea.left , y_pos);
ctx.lineTo(target.chartArea.right , y_pos);
ctx.closePath();
ctx.stroke();
};
switch(document.readyState){
case "complete" : new MAIN();break;
default : window.addEventListener("load" , function(){new MAIN()});break;
}
})()
解説
Chart.jsで標準で備わっている、Plugin機能を使って、任意箇所に横の線を引いてみました。 chart_pluginという関数を作って、それを起動時にセットしておくことで、任意線がひけます。 関数の内部は、Y軸のどの位置に線を引くかという、実際の値ですが、この場合座標でやってしまうと、レスポンシブやアニメーション対応できないので、Yの値にするようにしましょう。 それをlet yscale = target.scales["y"];
let y_pos = yscale.getPixelForValue(y_num);
こちらで、グラフ内の座標に変換しています。
あとは、canvasに描画する方式でラインを引いているだけなんですが、結構応用も効くし、グラフの中身が動的に変更するような場合にも対応できるので、便利に使えますよ。
x軸も似たような書き方をしているので、ほぼコピペで使えると思います。
