Chart.jsことはじめ #chart.js

はじめに

データビジュアライゼーションに興味を持ったため、色々調べてみたところ
以下のようなライブラリが多く使用されているとのことでした。

d3.js
Charts.js
Highcharts

この記事では、Charts.jsについて環境構築からサンプルグラフの描画までを紹介します。

対象者

Charts.jsを触ったことがない
データビジュアライゼーション初心者
環境構築からサンプルグラフの表示までをとりあえずしてみたい

実行環境

macOS Catalina 10.15.3
Google Chrome

インストール

公式のドキュメントを参照すると、npm bowser Github等からインストールができるみたいです。
htmlのsrcで指定することで使用できるので、特にローカルにインストールする必要はありません。
ちなみにnpmを使ったインストールは以下のコマンドを実行します。

npm install charts.js --save

コード

以下のコードをhtml形式で保存します。
コードの説明は公式のドキュメントが日本語であるため省略させていただきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
　<title>graph</title> 
</head>
<body>
  <h1>title</h1>
  <canvas id="myChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

  <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // 作成したいチャートのタイプ
        type: 'line',

        // データセットのデータ
        data: {
            labels: ["Jan.", "Feb.", "Mar.", "Apr.", "May.", "Jun.", "Jul."],
            datasets: [{
                label: "first data set",
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45],
            }]
        },

        // 設定オプション
        options: {}
    });
  </script>
</body>

</html>

ブラウザで確認するとグラフが表示されます。

次はオープンデータを様々な表示形式で表示していきます。

参考

https://misc.0o0o.org/chartjs-doc-ja/getting-started/
https://www.webprofessional.jp/introduction-chart-js-2-0-six-examples/