【Chart.js】Chart.jsのインストールと基本的な使い方について解説

JavaScriptを使う醍醐味の一つとしてダイナミックに画面を操作できるという点が大きいと思います。Chart.jsはそんな方におすすめのJavascriptライブラリです。名前の通り表を扱うもので下のような見栄えのいい表を作成する際に大きなサポートをいてくれます。今回はChart.jsを使って綺麗な表を作成してみましょう。

Chart.jsのインストール

Chart.jsの導入方法は大きく分けて二つあります。npmでローカル環境に落として利用するか、CDNでネットワーク経由で利用するか、です。用途に応じたインストールをお勧めします。

webサイトなどの開発に用いるのであればデプロイ時のブラウザ側での読み込みが早いnpmインストール
試しに遊んでみたい方は手軽にインストールができるCDN

がいいでしょう！本記事ではこの二つのインストールそれぞれについて紹介します。

npmを用いたインストール

npmがローカル環境に入っている前提で進めます。もしnpmをまだ入れていない方は「Node.jsのインストール」を参考にしてみてください(Node.jsを入れることでnpmも同時にインストールされます)

$ npm init

initコマンドでnpmをローカル環境に入れましょう。初期設定は基本的に全てデフォルトで大丈夫ですが、githubリポジトリで管理を行っている場合は、urlの設定をお使いのリポジトリのurlにしましょう。

package.jsonが作成されていれば初期化は完了です。

{
  "name": "chartjs",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/reibomaru/code-database.git"
  },
  "author": "code-database",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/reibomaru/code-database/issues"
  },
  "homepage": "https://github.com/reibomaru/code-database#readme"
}

続いてChart.jsをローカルインストールします。

$ npm install chart.js

node_modulesというフォルダが作成されたら完了です。すでにnpmでパッケージを管理している方はnode_modules/chart.jsというフォルダができていれば完了です。

CDNを用いたインストール

CDNを用いる場合はhtmlファイルのheadタグ内(ないしはChart.jsを記述するファイルの直前)にscriptタグで読み込みます。

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

今回はファイルサイズの小さいminファイルのバージョン2.9.3をインストールしましたが、他のバージョンや他のファイルを用いたい場合はCDNのChart.jsのページからソースを読み込むことができます。

Chart.jsの基本的な使い方

表の描画方法

インストールができたら実際に表を作成してみましょう。まずは表を表示するための準備としてcanvas要素をJavaScriptファイルで取得します。

(index.html)

<canvas id="myChart" width="400px" height="400px"></canvas>

Chart.jsではcanvas要素に表を描画するため、htmlでcanvasを用意します。

const ctx = document.getElementById('myChart');

getElementById()などを用いて要素を取得しましょう。他の要素の取得方法についてはChart.js公式リファレンスを参照してみてください！

Chart.jsでは次のようにChartインスタンスを作成して表を描画します。

const chart = new Chart(描画するキャンバスの要素, {
  //オプションの設定
})

表の実装例

(index.html)

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src="./node_modules/chart.js/dist/Chart.js"></script>
    <title>Chart.js</title>
</head>
<body>
    <div style="width:50%;">
        <canvas id="myChart" width="400px" height="400px"></canvas>
    </div>
    <script src='main.js'></script>
</body>
</html>

(mian.js)

const ctx = document.getElementById('myChart');

const chart = new Chart(ctx, {
    type: 'bar',
    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
        }]
    }
})

(実際の表示)

こちらのコードはcode-databaseのgithubにもアップされています。手元で確認したい方はぜひ活用してみてください！

この記事のまとめ

本記事ではChart.jsのインストールと基本的な使い方について紹介しました。最後にこの記事の要点をまとめてみます。

Chart.jsを用いることでcanvas要素に表を表示することができる
Chart.jsのインストールはnpmまたはCDNを用いてできる
Chart.jsではChartインスタンスを用いて指定した要素に任意のオプションが指定された表を描画することができる。

是非みなさんもChart.jsを利用してみてください！