chart.jsを利用したみた

chart.jsはWebサイトにグラフ(折れ線グラフ、棒グラフ、レーダーチャートなど)を描画できるライブラリです。軽量で、高機能、安定性が高くシンプルなライブラリで綺麗にグラフを描画できます。ここではchart.jsについて解説していきます。

01: Chartのインストール

CDNでライブラリを利用する。HTMLにはChart.jsがHTML5のキャンバスを使用するために<canvas>要素を記述する。

bash


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

html


<canvas id="chart"></canvas>

02: Chartの使い方

折れ線グラフ

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: "rgba(153,255,51,0.4)"
        }, {
          label: 'bob',
          data: [10, 29, 5, 5, 2, 3, 2],
          backgroundColor: "rgba(255,153,0,0.4)"
        }]
      }
    });
  </script>
</body></html>

棒グラフ

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: "rgba(153,255,51,0.4)"
        }, {
          label: 'bob',
          data: [10, 29, 5, 5, 2, 3, 2],
          backgroundColor: "rgba(255,153,0,0.4)"
        }]
      }
    });
  </script>
</body></html>

レーダーチャート

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: "rgba(153,255,51,0.4)"
        }, {
          label: 'bob',
          data: [10, 29, 5, 5, 2, 3, 2],
          backgroundColor: "rgba(255,153,0,0.4)"
        }]
      }
    });
  </script>
</body></html>

ポーラーチャート

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'polarArea',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: [
            "#2ecc71",
            "#3498db",
            "#95a5a6",
            "#9b59b6",
            "#f1c40f",
            "#e74c3c",
            "#34495e"
          ]
        }]
      }
    });
  </script>
</body></html>

円グラフ

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: [
            "#2ecc71",
            "#3498db",
            "#95a5a6",
            "#9b59b6",
            "#f1c40f",
            "#e74c3c",
            "#34495e"
          ]
        }]
      }
    });
  </script>
</body></html>

ドーナツグラフ

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'doughnut',
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          backgroundColor: [
            "#2ecc71",
            "#3498db",
            "#95a5a6",
            "#9b59b6",
            "#f1c40f",
            "#e74c3c",
            "#34495e"
          ]
        }]
      }
    });
  </script>
</body></html>

複合グラフ

bash


<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8" />
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
  <script>
    var ctx = document.getElementById('chart').getContext('2d');
    var complexChartOption = {
      responsive: true,
      scales: {
        yAxes: [{
          id: "y-axis-1",
          type: "linear", 
          position: "left",
          ticks: {
            max: 10.0,
            min: 1.0,
            stepSize: 2.0
          },
        }, {
          id: "y-axis-2",
          type: "linear", 
          position: "right",
          ticks: {
              max: 20.0,
              min: 1.0,
              stepSize: 5.0
          },
        }],
      }
    };
    var myChart = new Chart(ctx, {
      type: 'bar',
      options: complexChartOption,
      data: {
        labels: ['G', 'E', 'I', 'S', 'T', 'E', 'R'],
        datasets: [{
          type: 'line',
          label: 'alice',
          data: [3, 10, 1, 10, 3, 2, 6],
          borderColor : "rgba(254,97,132,0.8)",
          backgroundColor : "rgba(254,97,132,0.5)",
          yAxisID: "y-axis-1",
          fill: false
        }, {
          type: 'bar',
          label: 'alice',
          data: [7, 19, 3, 17, 6, 3, 12],
          borderColor : "rgba(54,164,235,0.8)",
          backgroundColor : "rgba(54,164,235,0.5)",
          yAxisID: "y-axis-2"
        }]
      }
    });
  </script>
</body></html>