これはなに？
Chartjsのバージョン違い
Webブラウザ上で簡単にグラフを描けるChartjs．
Javascriptのオブジェクトとしてさまざまなオプション指定が可能だか，その表記法がバージョン2系からバージョン4系（実際には2→3の移行時で変わったらしい）では変更になっている．
変更必要箇所の全部を網羅するわけではなく，自分がやった範囲でのメモ，
完全なガイドはこちら
そもそも..
Chartjsの使い方を調べながら作ってみたとき（温度の変化を時系列で表示する簡単なグラフ：下図参照）に参照してたのが2.7.2を使ったサンプルだった．
これがわかりやすかったので，そのまま使っていたのだけど，最新版（現時点で4.2）に移行した．
変更ポイント
グラフのタイトル - options直下
- 2系：
options直下にtitle - 4系：
options->pluginsの下にtitleを置くようになった．
x軸，y軸の設定 - options -> scalesの下で
- 2系：
xAxesやyAxesのオブジェクト名 - 4系：
xやyのオブジェクト名．
suggestedMax，suggestedMinの置き場所
- 2系：
scales->yAxis->ticks内に置いて動いていた - 4系：
scales->y->ticks同場所では動かず，scales->y下に移動
各軸のラベル
- 2系：
xAxis，yAxisの下にオブジェクトの配列を作って，その中にscaleLabelオブジェクト．さらにその下にlabelStringで表示文字列を指定 - 4系：
x，yの下にそのままtitleオブジェクト．表示文字列はtextで指定
さらに
optionsの他にプロットの点間の補完も3系以降ではデフォルトで直線になっているので，各データにlineTensionを追加．
コード
Chartjs4.2で動作しているコード例．
2系から4系への変更で更新した部分は行末に古いものをコメントとして残してある
新規に追加した行は行末に//．
削除した行はその行をコメントアウト．
let chart = new Chart( ctx,
{
type: 'line',
data: {
labels: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ],
datasets: [
{
label: 'x',
data: [ 3, 2, 1, 5, 3, 7, 8, 9, 3, 9 ],
borderColor: "rgba( 255, 0, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )",
lineTension: 0.4, //
},
{
label: 'y',
data: [ 2, 9, 5, 4, 7, 4, 1, 0, 7, 3 ],
borderColor: "rgba( 0, 255, 0, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )",
lineTension: 0.4, //
},
{
label: 'z',
data: [ 6, 0, 5, 1, 5, 8, 3, 2, 9, 8 ],
borderColor: "rgba( 0, 0, 255, 1 )",
backgroundColor: "rgba( 0, 0, 0, 0 )",
lineTension: 0.4, //
},
],
},
options: {
animation: false,
plugins: { //
title: {
display: true,
text: '"g" now'
} //
},
scales: {
y: { //yAxes: [{
suggestedMax: 11, //
suggestedMin: -1, //
ticks: {
//suggestedMax: 11,
//suggestedMin: -1,
stepSize: 1,
callback: function(value, index, values){
return value + ' g'
}
},
title: { //scaleLabel: {
display: true,
text: ' gravitational acceleration [g]' //labelString: ' gravitational acceleration [g]'
}
},
x: { //xAxes: [{
title: { //scaleLabel: {
display: true,
text: 'time' //labelString: 'time'
}
}
},
}
}
);
関連情報
https://qiita.com/teddokano/items/207f6ccac4199f604eef
https://www.chartjs.org/docs/latest/migration/v3-migration.html