Chert.js ver3系の書き方サンプル

2021年6月28日

chart.js テクノロジー プログラミング

ライブラリのバージョンに振り回されるのが、とっても嫌な、ユゲタです。 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を作って、グラフ内に縦横それぞれ罫線を引く処理を入れたので、参考にしてもらえればと思います。

サンプル画像表示

そして、出来上がるグラフは次のようになりますl. 今回はキャプチャ画像を貼り付けておきます。 いかがでしょう? 困った人のや役にに立てたでしょうか?