chart.jsでさくっと棒グラフ作る

この記事は最新更新日から、5年以上経過しています。

概要

棒グラフつくる機会が意味わからんぐらい増えたので、棒グラフを簡単に作れるように、のちの自分のためによく使う設定をまとめました。

内容

こういうグラフを作ります

下記をまるごと.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>

おわり