Canvasを使ってグラフが作れる「Chart.js」

canvasとは

Canvasとは、ブラウザ上に図を描くために策定された仕様です。
これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像を用意する必要がありました。また、条件に応じて表示する図を変化させたり、アニメーションを実現するために、FlashやJava アプレットが使われてきました。
Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことができます。
Canvasは、もともとはAppleが発祥で、当初、Mac OSでおなじみのDashboardで使われた技術仕様です。その後、Apple、Mozilla Foundation、Opera Softwareといったブラウザベンダが立ち上げたWHATWGという団体にて策定作業が行われていた「Web Applications」と呼ばれる規格に採用されました。

www.htmq.com

https://canvas.apps.chrome/

Chart.js

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが描けるJavascriptのライブラリです。
HTML5のCanvasを使って描画され、誰でも簡単に編集ができるようになっています。

www.chartjs.org

今回はCDNにあるバンドルファイルを使用します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

qiita.com

作例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
　<title>円グラフ</title> 
<style>
h1 {
text-align: center;
}
#box {
width: 800px;
margin: 50px auto 0;
}
</style>
</head>
<body>
  <h1>円グラフ</h1>
  <div id="box">
  <canvas id="myChart"></canvas>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
  var ctx = document.getElementById("myChart");
  var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      labels: ["A型", "O型", "B型", "AB型"],
      datasets: [{
          backgroundColor: [
              "#BB5179",
              "#EBB350",
              "#6ABB77",
              "#29A3D5"
          ],
          data: [38, 31, 21, 10]
      }]
    },
    options: {
      title: {
        display: true,
        text: '血液型 割合'
      }
    }
  });
  </script>
</body>
</html>

See the Pen
radar-chart by yachin29 (@yachin29)
on CodePen.

WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Canvasを使ってグラフが作れる「Chart.js」

Chart.js