概要
棒グラフつくる機会が意味わからんぐらい増えたので、棒グラフを簡単に作れるように、のちの自分のためによく使う設定をまとめました。
内容
こういうグラフを作ります
下記をまるごと.htmlファイルに貼り付けてダブルクリックすれば見られるはず。
書き方としてはひどいですが、ブラウザで見れはします…。
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> <div style="width:80%"> <canvas id="myChart"></canvas> </div> <script> var ctx = document.getElementById('myChart').getContext('2d'); var chart = new Chart(ctx, { //棒グラフ type: 'bar', // 実データ data: { labels: ['今日','明日','明後日','明々後日'], datasets: [{ label: '目標値', backgroundColor: '#FFFF00', data: [12000,118000,80000,60000] },{ label: '今年', backgroundColor: '#18FFFF', data: [130000,118000,10200,50000] },{ label: '去年', backgroundColor: '#FF4081', data: [90000,1200000,110000,90000] } ] }, // Configuration options go here options: { title: { display: true, text: '毎日の何かの価格' }, scales: { xAxes: [ { ticks: {} } ], yAxes: [ { ticks: { min: 0, max: 150000, stepSize: 50000, callback: function(label) { return label.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円'; } } } ] }, tooltips: { callbacks: { label: function(tooltipItem){ return tooltipItem.yLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',') +' 円'; } } } } }); </script>
おわり