概要

Charts.js はその名の通り JavaScript で様々なグラフやチャートを描画できるライブラリです今回は HTML + JavaScript のみで使ってみました

環境

macOS 11.4
Chrome 91.0.4472.114
Charts.js 3.4.0

とりあえず棒グラフを作成する

jQuery とCharts.js を head タグで CDN から読み込みますグラフは canvas タグに描画するので canvas タグを id 付きで定義します div タグで囲っておくとサイズなどを調整しやすいのでおすすめです

基本的には new Chart(canvas, config) を使って canvas に設定するグラフデータを渡すだけです config には type, data, options の 3 つが必要になります type はグラフの種類を data はグラフのデータを options はグラフを描画する際の様々なオプションを設定します

あとはこのファイルを nginx のドキュメントルートなどに配置すれば確認できます

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js" integrity="sha512-JxJpoAvmomz0MbIgw9mx+zZJLEvC6hIgQ6NcpFhVmbK1Uh5WynnRTTSGv3BTZMNBpPbocmdSJfldgV5lVnPtIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

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

<script>
var ctx = $('#myChart')[0].getContext("2d");
var data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
  }]
};
var options = {
  scales: {
      y: {
          beginAtZero: true
      }
  }
};
var config = {
  type: 'bar',
  data: data,
  options: options,
};
var myChart = new Chart(ctx, config);
</script>

</body>
</html>

線グラフを作成する

type で line を使います fill でグラフ内を塗りつぶせます tension はグラフの滑らかさを設定できます

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js" integrity="sha512-JxJpoAvmomz0MbIgw9mx+zZJLEvC6hIgQ6NcpFhVmbK1Uh5WynnRTTSGv3BTZMNBpPbocmdSJfldgV5lVnPtIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>

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

<script>
var ctx = $('#myChart')[0].getContext("2d");
var data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      fill: true,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.5,
      borderWidth: 5,
  }]
};
var options = {
  scales: {
      y: {
          beginAtZero: true
      }
  }
};
var config = {
  type: 'line',
  data: data,
  options: options,
};
var myChart = new Chart(ctx, config);
</script>

</body>
</html>

円グラフを作成する

type で doughnut を使います hoverOffset はマウスホバーした際に該当のデータを移動させる距離を指定します

高さに横のサイズに合わせて自動的に高さが決まってしまうので maintainAspectRatio + div で高さを固定すると良いです

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js" integrity="sha512-JxJpoAvmomz0MbIgw9mx+zZJLEvC6hIgQ6NcpFhVmbK1Uh5WynnRTTSGv3BTZMNBpPbocmdSJfldgV5lVnPtIw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <style type="text/css">
  <!--
    div {height: 100vh;}
  -->
  </style>
</head>
<body>

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

<script>
var ctx = $('#myChart')[0].getContext("2d");
var data = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
      label: 'Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
      ],
      hoverOffset: 100,
  }]
};
var options = {
  maintainAspectRatio: false
};
var config = {
  type: 'doughnut',
  data: data,
  options: options,
};
var myChart = new Chart(ctx, config);
</script>

</body>
</html>

最後に

その他にも「レーダーチャート」や「鶏頭図」「バブルチャート」「散布図」「面グラフ」「複数グラフの結合」などが行なえます

次回はプラグインを使ってズームなどできるようにしてみます

hawksnowlog

2021年7月9日金曜日

Charts.js 入門

概要

環境

とりあえず棒グラフを作成する

線グラフを作成する

円グラフを作成する

最後に

参考サイト

0 件のコメント:

コメントを投稿