最近、仕事でwebサイトを作るときに、グラフ表示をするときは、Chart.jsを使うようにしている、弓削田です。
Webサービス系で、数値を並べるページの場合、ちょっとした事でも、グラフ表示をしてあげると、
見やすくなって、みんな喜んでくれます。
そんな時に、だいたいどんなチャート表示でも、実現してくれるChart.jsですが、
プログラマーの人たちが、それぞれのブログで、使い方などを解説してくれていて、
それらをコピペするだけでも、簡単にチャート表示ができてしまうので、
導入する時の学習コストが低くて、助かります。
古いバージョンの記事をコピペして、大苦戦
こうしたOSSライブラリは、人気があるものは、更新頻度も早く、
機能追加も、頼もしいぐらいにやってくれます。
ところが、バージョンがメジャーバージョンのアップともなると、内部設定を大きく変えてきて、
以前のバージョンでの設定でエラーが出てしまうこともあり、
今回は、そんなトラブルに合ってしまったという事をブログに残しておきます。
そもそも、人気のあるこのChart.jsは、一般のブロガーの人たちは、ほとんどが、2.xバージョンで記事を書いているため、
最新版を、Githubからcloneして使っている時に、なぜだか、思ったとおりに表示されなくて、
本日、半日近くも費やしてしまいました。
トラブった内容を恥ずかしげもなく、公開
今回のトラブルは、とあるチャートを表示するときに、数値が0からスタートするように、y軸に、"beginAtZero: true"というオプションを組み込むだけなのですが、
サンプルページなどをみて、何度も書き直してみても、全く反映されませんでした。
その時のコードは次のとおりです。
<canvas id="chart" width="400" height="200"></canvas>
<script>
let canvas = this.new_canvas("chart");
var ctx = canvas.getContext('2d');
this.chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'First dataset',
data: [30, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
このまま、表示をしても、全くダメです。下のような状態で、ワケわからない表示がされてしまいます。
素敵に解決！
そして、色々グーグル先生に紹介してもらったページを渡り歩いて、ようやく本家のバージョン3.xのこれまでの設定での対比表ページを見つけることができました。
https://www.chartjs.org/docs/3.0.0-alpha/getting-started/v3-migration.html
次のコードにすることで、見事に解決することができました。
<canvas id="chart" width="400" height="200"></canvas>
<script>
let canvas = this.new_canvas("chart");
var ctx = canvas.getContext('2d');
this.chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
yAxisID: 'yaxes_1',
label: 'First dataset',
data: [30, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
"yaxes_1" : {
beginAtZero: true
}
}
}
});
</script>
きれいに表示されましたね。
そもそも、どこが問題だったかというと、設定箇所の"options/scales/"までは、同じなんですが、その後"yAxes"という値ではなく、datasetsで定義した、
id値をkey値とした、データに、直接"beginAtZero: true"を記述するという事なんですね。
他の設定も、この中に記述すれば、ちゃんと反映されるはずです。
他の設定などでも、変更されている箇所は、上記の差分ページマニュアルを確認しておく必要がありそうです。
それにしても、ブログを書いている人は、こうしたバージョン差分などに対応してくれるページは、今のところ出会えませんでした。
また、しばらくの間、このページのアクセスが伸びるかもね・・・
