3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Chart.jsで数値を3桁区切りにする方法(Typescript.ver)

Last updated at Posted at 2019-04-18

業務で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の方がスッキリかけますね!!

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?