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>
