JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Chart.js

JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示

JavaScriptのライブラリ「Chart.js」でグラフ・チャートを表示

複雑な定量のデータは、チャートやグラフを使えば視覚的に分かりやすく直観的に理解できますよね。

そんな時に便利なのは、JavaScriptのライブラリ「Chart.js」です。

かなりメジャーなライブラリなので、既にご存知の方が多いとは思いますが、そんな「Chart.js」を使って、いろんなグラフ・チャートを作ってみます。

是非、参考にしてみてください。

Chart.js

「Chart.js」は、JavaScriptでグラフ・チャートを描画するライブラリです。

Chart.js
写真:Chart.js より

JavaScriptでグラフの設定を行い、図形を描く際に使用されるHTML5の Canvas タグに、JavaScriptを使ってブラウザ上にグラフ・チャートを描画します。

Chart.jsで描画されたグラフ・チャートは、インタラクションな操作も可能で、見栄えのいい表を作成するのにピッタリなライブラリです。

外部リンク Chart.js 公式サイト

かかかず
かかかず

また、MITライセンスなので、商用・私用を問わず無償で利用可能なのも嬉しいところです。

この記事では、そんな「Chart.js」についてサンプルも交え解説していきます。

Chart.jsでグラフ・チャートサンプル6種

早速、Chart.jsを使ったサンプルです。ここでは以下6種類のグラフ・チャートを作ってみました。

  • 線グラフ … 時系列で変化を捉えるときに使用するグラフ
  • 棒グラフ … 縦軸にデータ量をとり、棒の高さでデータの大小を表したグラフ
  • 水平(横)の棒グラフ … 棒グラフを横にしたグラフ。走行距離や作業の進捗など、進展をイメージさせる項目で用いられる場合が多い。(らしい)
  • バブルチャート … データの影響度合が強いか・弱いかを円の大小も用いて視覚的に把握することができるチャート
  • パイチャート … 複数の部分に分かれた円形のチャート
  • レーダーチャート … 複数の項目がある変量を正多角形上に表現したチャート

これらのグラフ・チャートはアコーディオンUIをクリックすると見れるので、見たいものをクリックしてみてください。

この他にも散布図や、真ん中がポッカリ空いているドーナツチャート、棒グラフと線グラフの掛け合わせのグラフなど、Excelで選べるグラフはほとんどと言っていいほどできてしまうのが「Chart.js」です。

かかかず
かかかず

しかし「Chart.js」は、本当にすごいライブラリですね。

実装の手順と方法

手順と方法
Chart.jsのインストール

Chart.jsのインストールは、npmやダウンロード、CDNなどで使用可能です。以下はCDNでの利用方法で、以下のコードをHTMLの <head>〜</head> の中に記述しましょう。

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

npmでのインストール方法は こちら を参考にしてみてください。

HTMLを記述

設置したい場所へ canvas タグをHTMLに記述します。

<canvas id="myChart" width="400" height="400"></canvas>
JavaScriptを記述

最後に、JavaScriptのコードをページに記述します。これは、Chart.jsの機能や各値を指定するオプションです。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
        datasets: [{
            label: '得票数',
            data: [12, 19, 3, 17, 9, 4],
            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: 2,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

グラフの色や、背景色、レスポンシブ、目盛線等々、いろんなカスタマイズができます。

Chart.js の使用方法

Chart.jsは、いろんなカスタマイズが可能で、自分好みのUIを簡単に作ることができます。また、「棒グラフ&折れ線グラフ」のように、複数のグラフを一つのブロックに表示させることもできます。

これらの方法については、Chart.js 日本語ドキュメント さんが詳しく解説してくれています。

Chart.js
写真:Chart.js 日本語ドキュメント より

とにかくオプションが豊富なので、参考にしてみてください。

外部リンク Chart.js 日本語ドキュメント「使用方法」

かかかず
かかかず

他のチャートライブラリとの比較も載っていたりします。

さいごに

いかがでしたでしょうか?今回は「Chart.js」のご紹介でした。

「Chart.js」は、HTMLで静的に使うより、データベースの値からグラフ・チャートに描画することが多いと思いますが、是非参考にして使ってみてください。