Ⅰ. はじめに
タイトルの通り「Vue.js + Chart.jsで数値をカンマ区切りで表示する方法」です。
Ⅱ. やり方
1. 必要なパッケージをインストールする
npm i vue-chartjs npm i chart.js
2. サンプルプログラムを書く
src/components/LineChart.vue
<script> import { Line, mixins } from 'vue-chartjs' const { reactiveProp } = mixins export default { extends: Line, mixins: [ reactiveProp ], props: [ 'options' ], mounted () { this.renderChart(this.chartData, this.options) } } </script>
src/App.vue
<template> <line-chart :chart-data="chartData" :height="100" :options="chartOptions" /> </template> <script> import LineChart from '@/components/LineChart.vue' export default { components: { LineChart }, data () { return { chartData: { labels: [ '1月1日', '1月2日', '1月3日' ], datasets: [ { label: 'A社株価', // lineTension: 0, data: [ 100, 1000, 10000 ] } ] }, chartOptions: { tooltips: { callbacks: { label: (tooltipItems, data) => data.datasets[0].data[tooltipItems.index].toLocaleString() } }, scales: { yAxes: [ { ticks: { // eslint-disable-next-line no-unused-vars userCallback: (value, index, values) => value.toLocaleString() } } ] } } } } } </script>
実行結果
その他
- Chart.js 3からカンマ区切りがデフォルトになるようです
https://github.com/chartjs/Chart.js/pull/160#issuecomment-592526243