chart.jsの使い方！chart.jsでおしゃれなグラフを表示する方法（入門編）

5358 ワード
Web グラフ chart.js JavaScript 簡単 JavaScript テキストリンク

はじめに

今回はchart.jsを用いて「動く！」「おしゃれ！」「かんたん！」なグラフを表示していきたいと思います。

⚠️htmlファイルとjsファイルをそれぞれ作ることを推奨しますが、初心者の方は躓く可能性があるため、独断でまとめてhtmlファイルに記述しちゃいます。

chart.jsとは

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、8種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。 とても分かりやすいマークアップなので、誰でも簡単に編集ができるようになっています。

実際に表示すると↓のようになります。

ソースコード

早速ソースコードに入ります。
公式サイトでもサンプルコードが公開されています。
公式サイト内でグラフを弄れるのでぜひ！



<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chart</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>
</head>
<body>

<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{

      label: 'label',
      data: [3, 18, 6, 10, 12, 7, 12],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});
</script>

</body>
</html>

各グラフの描写方法

棒グラフ：type:'line',
折れ線グラフ：type:'bar',
レーダーチャート：type:'radar',
散布図：type:'scatter',
円グラフ：type:'pie',
ドーナツチャート：type:'doughnut',
バブルチャート：type:'bubble',
鶏頭図：type:'polarArea',
に変更すれば描写できます。

グラフの数値を変数によって動的に変化させたいとき 

data: [3, 18, 6, 10, 12, 7, 12],
　　　　　　　　　↓
data: [a, b, c, d, e, d, e],　

の数値の部分を任意の変数にするだけでok!

まとめ

今回はchart.jsで描写する８つのグラフについて紹介しました。

紹介したソースコードは非常にシンプルですが、こちらをベースに御自身で必要な要素を追加してみて下さい。