棒グラフを描画する方法【Chart.js】｜DAD UNION

Chart.jsを使って棒グラフをレンダリング(描画)する方法をご紹介します。
線グラフの他にレーダーチャート、円グラフ、バブルチャート、散布図等、様々なグラフが描画出来るプラグインjsです。

Contents

棒グラフを描画するCSSの記述
棒グラフを描画するHTMLの記述
Chart.jsを使って棒グラフをレンダリング(描画)するJavaScriptの記述
Chart.jsを使って棒グラフをレンダリング(描画)するデモページ
ソース元：Chart.js

棒グラフを描画するCSSの記述

※特に指定は無く、必要に応じて変更して下さい。

<style type="text/css">
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0;
  line-height: 1.4em;
}
</style>

棒グラフを描画するHTMLの記述

※棒グラフを描画するcanvasタグにid=”myChart”を指定します。

<h1>Chart.jsを使って棒グラフをレンダリング(描画)してます。</h1>

<canvas id="myChart" width="400" height="400"></canvas>

Chart.jsを使って棒グラフをレンダリング(描画)するJavaScriptの記述

※chart.jsファイルを読み込みます。document.getElementById(グラフを描画するid).getContext(‘2d’)を記述します。ソース元：Chart.js「グラフを作成する」を参考にしてます。

<script type="text/javascript" src="chart.js"></script>
<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
</script>