大変だこれ。
環境
Chart.js 4系（4.4.1）
やりたいこと
ページ読み込み時にグラフを出力。
ボタンをクリックしたらグラフを更新。
具体的なところでは、読み込み時に初期設定された期間のデータをグラフ表示。期間を任意指定してボタンを押したら該当期間のグラフを表示。
参考
記事は2系だけど、やることは同じだから読めば分かる。
どこがネックかとか、4系でどう違うのかとかその辺。
やっていく
<!DOCTYPE html>
<html lang="ja">
<head>
︙
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
</head>
<body>
<canvas id="chart01"></canvas>
<button type="button" id="changeCanvas">click</button>
<script>
//初期データ
var values =[
{x:"1",y:600},
{x:"2",y:200},
{x:"3",y:100},
{x:"4",y:400},
{x:"5",y:200},
{x:"6",y:600}
];
//グラフ表示（ページ読み込み時、初期データ反映）
drawChart();
//グラフ表示の関数
function drawChart() {
const ctx = document.getElementById('chart01');
const config = {
type: "line",
data: {
datasets: [{
data: values, //データ変数を読み込み
}],
},
}
window.myChart01 = new Chart(ctx, config);
}
//クリックで発火
document.getElementById('changeCanvas').onclick = function() {
//元のグラフを消去
if (myChart01) {
myChart01.destroy();
}
//変更データ
values =[
{x:"1",y:400},
{x:"2",y:200},
{x:"3",y:600}
];
//グラフ表示（変更データ反映）
drawChart();
}
</script>
</body>
</html>chart.jsは関数にして発火
通常というか、ただグラフを表示させたいだけなら関数に格納する必要はない。Chart.jsの本家でもそうしてある。
上記では「drawChart()」に格納してこれを発火させることでグラフを表示させているわけで、これはページ読み込み時とボタンクリック時で2つの発火タイミングがあるから。
new Chart()はwindow.◯◯で宣言する
通常の案内だとconstになってるけど、ここをwindow.に変えないと動かない。
//NG
const myChart01 = new Chart(ctx, config);
//OK
window.myChart01 = new Chart(ctx, config);見落としがちなので注意。
destroy()からの再描写
ボタンをクリックした際の動作では、まずdestroy()しておく必要がある。
内容を破棄せずに描写を発火させても動作しないことを確認した。
記述の順番に注意
クリック動作の記述は<script>内のどこに書いてもいいんだけど、ページ読み込み時の関数発火と変数と関数の並びはこれに倣うこと。やってみたら分かるけど、順序を逆にすると動かない。
データは好きに変えていい
今回の例で分かる通り、グラフのデータ数が異なってても問題なく表示される。
一旦削除して描画してるから、完全にリセットされてるから、当然といえば当然だけど。
今回はデータのみを変更する形にしてあるけど、オプションとかを切り替えるように書けば全般的な変更も可能になる。
でもまあ、揃えてあったほうが数値だけ変動して自然な感じに見えますね。
これによりできること
追っかけでグラフを更新できるようになるんで、ajaxとかの非同期処理で拾ってきたデータに対応できる。
ページ自体の再読み込みが発生しないので、グラフをページのどこに仕込んでも平気になる。
使いたい場面は限られるけどかなり便利。
コメント