Javascript

グラフ/チャート作成用JSライブラリ「Chart.js」を試してみた

Webサイトを制作でグラフやチャートを使うことは多いと思います。

グラフ/チャートを画像から、JSライブラリを使用して表現するだけで、デザインやアニメーションが大きく変わってきます。

そこで今回はグラフ/チャート作成用JSライブラリ「Chart.js」を実際に試してみました。

Chart.jsとは

「Chart.js」はCanvasを使用したグラフ/チャートを描画するJSライブラリです。
グラフ用のデータを用意すれば、折れ線グラフや棒グラフ、円グラフなど様々なグラフを描画することができます。

ライセンスはMITライセンスです。


Chart.js

Chart.jsの導入方法

Chart.jsのインストール

Chart.jsのインストール&読み込み方法は大きく以下の3種類

Chart.jsリンク
GithubChart.js | GitHub
CDNChart.js | cdnjs.com
npmChart.js | npm

Githubからダウンロードする場合

Githubページからリポジトリをダウンロードして、自分でビルドする必要があります。ビルド方法は省略。

CDNでファイルを読み込む場合

Chart.js | cdnjs.com にアクセスします。
時間軸のグラフを作成する場合は、「Moment.js」が含まれたChart.bundle.jsをダウンロード、時間軸のグラフを作成しない場合は、Chart.jsをダウンロード。(それぞれ圧縮版あり)

今回のデモは、時間軸なしのグラフを作成するので、「Chart.min.js」をダウンロードします。

npmでダウンロードする場合

以下のコマンドでインストールできます。

npm install chart.js --save

Chart.jsの使用方法

Chart.jsの使用方法については、以下の公式サイトを参考に進めていきます。


Getting Started · Chart.js documentation

グラフを描画する箇所にcanvasタグを指定する

まずは、サイトに沿ってグラフが表示されるまで進めていきます。
HTMLにグラフ表示用のcanvasタグを記述します。

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

Chart.jsを読み込む

Chart.jsを読み込みます。今回は、CDNを利用してChart.jsを読み込みます。以下のタグを</body>手前に記述します。

グラフ描画用のscriptファイルも読み込ませます。(今回の場合、graph.js)

<body> 
<!-- Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script src="js/graph.js"></script>
<!-- Chart.js -->
</body>

グラフ描画用のJSを記述する

graph.jsにグラフ描画用のJSを記述します。今回は公式サイトのサンプルをそのまま貼り付けて、グラフが表示されるか確認してみます。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },

    // Configuration options go here
    options: {}
});

グラフがcanvasに描画されているか確認する

以下の画像のようにグラフが表示されることが確認できました。
アニメーションもデフォルトでついているので是非デモでご確認ください。

ここまでのChart.jsを使用したデモです。