ライブラリのバージョンに振り回されるのが、とっても嫌な、ユゲタです。
2021年6月現在、Chart.jsの最新バージョンは、v3.3.2となっていますが、
ググった結果で表示されるのは、ver2系のものがほとんどなので、
困っている人も多いかと思い、ボクがプロジェクトで使ったコードを公開して、参考にしてもらおうと思ってブログを書きました。
Chart.jsリファレンスサイト
Chart.jsの最新版リファレンスサイト
上記のリンクで、バージョン切り替えをすると、古いバージョンでのリファレンスを見ることができます。
このページを見れば、基本的に機能がすべて書かれてはいますが、とにかく分かりづらい。
きっと誰かのコードをコピペしたいという人は多いのではないでしょうか？
サンプルコード公開
これは、実際に仕事で使ったChart.jsの設定箇所ですが、必要最低限の記載にしているため、コピペしてそのまま表示されることはありません。
コピペした後で、適宜内容を書き換えてお使いください。
// 35年分のデータ
let datas = ※必要なデータを配列で取得
let labels = [1,2,3,4,5 ... 35];
let datasets = [
{
data: datas,
fill: false,
borderColor: "rgba(0,0,255,0.5)",
borderWidth: 3,
pointRadius : 3,
pointBorderWidth : 0,
label: '現状の運用状況',
backgroundColor: "rgba(0,0,255,0.3)"
}
];
let canvas = document.createElement("canvas");
canvas.width = "300";
canvas.height = "150";
area.appendChild(canvas);
var ctx = canvas.getContext('2d');
this.graph_fire = new Chart(ctx, {
name : "graph_fire",
type : "line",
data : {
labels : labels,
datasets : datasets
},
options : {
layout : {
padding : {
top : 0,
right : 20,
bottom : 0,
left : 20
}
},
responsive: true,
title: {
display: false,
},
legend: {
//凡例
display : true,
position : "top",
labels: { fontSize: 10 }
},
tooltips : {
callbacks : {
title : function (tooltipItem, data){
return tooltipItem[0].label +" 年後";
},
label : function (tooltipItem, data){
return tooltipItem.value +" 万円";
}
}
},
scales: {
x : {
gridLines : {
display: false,
drawBorder: false
},
scaleLabel: {
display : true,
labelString : "年後"
}
},
y : {
suggestedMin : ※値の最小値をセット,
suggestedMax : ※値の最大値をセット,
scaleLabel : {
display : true,
labelString : "万円"
}
}
}
},
plugins: [{
beforeDraw: chart_plugin_loan(this)
}]
});
function chart_plugin_loan(target){
// view
let ctx = target.ctx;
// 縦ラインの追加
ctx.beginPath();
ctx.strokeStyle = "red" ;
ctx.moveTo(raw_line , target.chartArea.top);
ctx.lineTo(raw_line , target.chartArea.bottom);
ctx.closePath();
ctx.stroke();
// 横ラインの追加
ctx.beginPath();
ctx.strokeStyle = "blue" ;
ctx.moveTo(target.chartArea.left , col_line);
ctx.lineTo(target.chartArea.right , col_line);
ctx.closePath();
ctx.stroke();
};
簡単解説
まず、labelとdatasは、それぞれのデータを配列でセットしてください。
今回は、x軸に「○年後」、y軸に「○万円」という年次のお金のトレンドを表示する仕様でした。
特にカスタマイズポイントで多いのが、optionsの設定で、今回のコードでは、次のような内容になっています。
layout
- padding : グラフ内での余白をセット（cssのような書き方なのでわかりやすいですね。）
responsive : ページサイズが変わった時に、グラフもサイズ変更するかどうか
legend : 凡例表示
tooltips : マウスカーソルが、グラフのポイントに重なった時に表示されるツールチップ
※ここで縦軸、横軸それぞれの値をそれぞれ処理しています。
scales
- x : x軸の設定
- y : y軸の設定
※最も頻繁にセットするのが、ここの値でしょう。
また、pluginsについては、chart_plugin_loanというfunctionを作って、グラフ内に縦横それぞれ罫線を引く処理を入れたので、参考にしてもらえればと思います。
サンプル画像表示
そして、出来上がるグラフは次のようになりますｌ．
今回はキャプチャ画像を貼り付けておきます。
いかがでしょう？
困った人のや役にに立てたでしょうか？
