業務でChart.jsを使用している際に、グラフの数値を3桁区切りにする方法が
Typescriptの書き方でなかなか出てこなく、結構な工数を使ってしまったので、
メモ程度にこちらに記載しようと思います。。。笑
ちなみにjavascriptでの書き方は以下のような感じになります。
https://blog.capilano-fw.com/?p=235
javascriptではこんな感じでchart_optionのy軸の設定でcallbackを指定すれば簡単に3桁区切りで
グラフの数値が表示されるようになります!
yAxes: [
{
ticks: {
min: 0,
max: 10000,
callback: function(label, index, labels) {
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
]
ではTypescriptで上記のcallbackを書くとなるとどのような書き方になるのでしょうか?
Typescriptはアロー関数が使用できるので、以下のように記載することになります。
callback: (label: string) => {return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';}}
Typescriptの方がスッキリかけますね!!