サイトにJavaScriptでグラフを表示する

2018年12月25日 JavaScript

Chart.jsはグラフ作成用のJavaScriptライブラリーです。簡単にアニメーションのついたグラフを表示することができます。折れ線グラフ、円グラフ、棒グラフ等、様々な種類が用意されています。

使い方

<canvas id="myChart" ></canvas>

まず、Chart.jsのライブラリーを読み込みます。今回はCDNを利用します。
他にもいくつか方法はあるので、公式サイトで確認してみてください。

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

JavaScriptでグラフの内容を記載します。

<script type= text/javascript >
    var ctx = document.getElementById('myChart').getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{data: [300, 50, 100],
                backgroundColor: ["rgb(255, 53, 92)","rgb(1, 145, 255)","rgb(255, 186, 45)"]
            }]
        }
    });
</script>

グラフを表示したいところにcampusタグを記入。

<canvas id="myChart" ></canvas>