Open2
vue-chartjs移行メモ
vue-chartjsの3系から4系にあげる
- vue2系を使用している場合はimportの仕方は以下のようになる(tree shaking方式を採用)
- vue3系を使用している場合はlegacyは必要ない
import { Bar } from 'vue-chartjs/legacy'
import {
Chart as ChartJS,
Title,
Tooltip,
Legend,
BarElement,
CategoryScale,
LinearScale,
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
その他はコンポーネントの呼び出し方が変更されている
chart.jsの変更点(自分が該当した部分)
-
x軸,y軸の定義の方法が変更になりました
scales内のxAxesとyAxes配列は削除されました
参照:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#scales -
beginAtZero,min,maxの記述位置が変更になっています。
参照:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#specific-changes -
fontColorなどの色指定がcolorという指定に変更されました
参照:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#defaults
なので
ticks: {
fontColor: '#ccc' → color: '#ccc' // となる
}
と記述
grid線(横線、縦線)の色も同様
grid: {
color: '#ccc'
}
- [x/y]Axes内にあったzeroLine*オブションが削除されたのでスタートの線の色を変更したい場合は以下のように記述しないといけなくなった
grid: {
color: (context) => {
if (context.tick.value === 0) return '#cccccc'
return '#ffffff'
}
}
書き方の参照: https://www.chartjs.org/docs/latest/samples/scale-options/grid.html
legend,title,tootipプロパティの記述位置などが変更になってます
参照:https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#specific-changes