こんにちは。フリーランス・コンサルタント＆エンジニアの 現在、データをグラフ化する開発でchart.jsというJavaScriptパッケージを使っています。
このchart.js、MITライセンで配布されてるにもかかわらずとても使い勝手がいいんで、JavaScriptをで、グラフを描くといえばもはやデファクトスタンダードといってもいいんじゃないかと思うほどの出来栄えです。
しかし、ホントにいい時代になりました。
過去にも同様の開発は行ったことがあるんですけど、今のように JavaScript 全盛の時代じゃなかったんで、PHPのGDを使っているグラフを作っていたのを思い出しました（笑）
ちなみにChart.jsが初見の方は下のリンクからサンプルを見ることができますよ！
※他にもいろんなタイプのグラフに対応してます。一覧はこちら
目次
さて、ここから本題です。
まず、chart.jsでは数字データを設定し、それがグラフになるわけですけど、実はデフォルトだと数字がまんま表示されちゃうんで、金融機関勤めをしていた私（←逃げるように転職しましたが^^;）としてはちょっと気持ち悪いわけです。
つまり、もし100万円の売上を表示したい場合、Y軸やツールチップには、
1000000円
と表示されるんですけど、いち、じゅう、ひゃく、せん・・・・・・いや、カンマふれよ（大汗）
ってなってしまいます。
なので、これを
1,000,000円
にするテクニックを紹介したいと思います。
では、実際のコードで実現方法を紹介しましょう！
１．Y軸の数字を３桁カンマ区切りにする
chart.jsにはオプションでY軸の詳しい設定ができるんですけど、その中にcallbackというオプションがあるんで、ここに文字列をカスタマイズするコードを挿入します。
（実際のコードはこちら）
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
new Chart(canvas, {
type: 'line',
data: {
datasets: [
{
label: '売上',
data: [1000000, 7000000, 3000000]
}
],
labels: ['前々月', '前月', '今月']
},
options: {
scales: {
xAxes: [
{
ticks: {}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 10000000,
stepSize: 5000000,
callback: function(label, index, labels) { /* ここです */
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
]
}
}
});
</script>
中身としては、コールバックに第一引数としてY軸の数字がやってくるんで、これを正規表現を使って、３桁ずつカンマで区切るという流れになっています。
また、このコールバックの中で「円」や「％」「件」などの単位を追加することもできます。
お好みに合わせて変更してみてください。
２．ツールチップの数字を３桁カンマ区切りにする
これも基本的なやりかたは一緒ですけど、設定する場所がtooltipsという場所になります。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
new Chart(canvas, {
type: 'line',
data: {
datasets: [
{
label: '売上',
data: [1000000, 7000000, 3000000]
}
],
labels: ['前々月', '前月', '今月']
},
options: {
tooltips: { /* ここです */
callbacks: {
label: function(tooltipItem, data){
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
}
});
</script>
３．コピペ用、完全版（Y軸＆ツールチップを３桁カンマ区切りにする）
Y軸とツールチップを両方とも３桁カンマ区切りにするコードはこちら。
コピペ用です。
<canvas id="canvas" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script>
var canvas = document.getElementById('canvas');
new Chart(canvas, {
type: 'line',
data: {
datasets: [
{
label: '売上',
data: [1000000, 7000000, 3000000]
}
],
labels: ['前々月', '前月', '今月']
},
options: {
scales: {
xAxes: [
{
ticks: {}
}
],
yAxes: [
{
ticks: {
min: 0,
max: 10000000,
stepSize: 5000000,
callback: function(label, index, labels) {
return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
]
},
tooltips: {
callbacks: {
label: function(tooltipItem, data){
return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円';
}
}
}
}
});
</script>
ちなみに
開発者としては、正規表現で３桁カンマ区切りにする部分が２ヵ所重複してるんで、関数などにして一つにもまとめておくことをおすすめします。（というかネイティブのJavaScriptで関数を提供してくれたら嬉しいかなーなんて、楽しすぎですかね^o^;）
以上、個人的にもおすすめできるchart.jsのカスタマイズ方法でした。
ではでは〜！
