コピペでできるChart.jsの使い方（最低限の実装）

ホームページにグラフを描きたいなと思って、ちょっと検索してみたら意外と簡単な方法で実現できたのでご紹介。

Chart.jsという便利なライブラリーがあり、これを使えば簡単にブラフを描く事ができます。
HTML5から採用になったcanvasタグを使ったライブラリーのようです。

コピペ用コード

下記がサンプルコード
コピペするだけでサンプルグラフが表示されます。

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

<div class="chart-container" style="position: relative; width: 100%; height: 300px;">
    <canvas id="myChart"></canvas>
</div>

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['１月', '２月', '３月', '４月', '５月', '６月', '７月'],
            datasets: [{
                label: 'マイグラフ',
                data: [25, 10, 5, 2, 20, 30, 45],
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)'
            }]
        },
        options: {
            maintainAspectRatio: false
        }
    });
</script>

オリジナルのグラフを表示するための詳しい方法は以下をご覧ください。

Chart.jsの使い方

Chart.jsの読み込み

まずChart.js（ライブラリー本体）を読み込みます。
ダウンロードしてからそのファイルを読み込むこともできますが、今回は、CDN（サーバから読み込む形）でやってみます。

HTMLのheadタグ内に下記のコードを入れる。

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>

canvasタグの挿入

グラフを挿入したい部分に下記のようにcanvasタグを挿入します。

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

グラフデータの設定

あとは、描きたいグラフのデータをChart.jsに渡してやるだけで完成です。

データを渡すには、下記のようなコードを使って行います。なんだか難しいコードが書かれていますが、下記のコードをコピペして必要な部分を書き換えればOK！

<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['１月', '２月', '３月', '４月', '５月', '６月', '７月'],
            datasets: [{
                label: 'マイグラフ',
                data: [25, 10, 5, 2, 20, 30, 45],
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)'
            }]
        },
        options: {}
    });
</script>

とりあえず全部コピーしてbodyタグ内の1番下辺りに貼り付けてみてください。どうですか？もうグラフが描けちゃえましたね！

あとは必要な部分を書き換えていきます。

type:

まずtype: 'bar',の部分。これはグラフの種類を指定しています。
グラフのタイプは、棒グラフの他に円グラフや折れ線グラフなどいろいろ用意されています。

ドーナツグラフは円グラフのオプションで設定します。

data:

次に、data: {の部分ではグラフのデータを指定しています。

options:

最後に、options: {}の部分で各種オプションを指定できます。
オプションでは、グラフの仕様を細かく変更したり指定できる項目がたくさん用意されています。

スマホでの表示について

デフォルトの設定ではアスペクト比を維持するようになっているため、スマホで表示した時に思った通りのグラフが描けない場合があります。そんな時は、グラフ全体の縦横を指定にして、さらにオプションでアスペクト比を維持しない設定にしてあげます。

グラフ全体の縦横サイズ指定

canvasタグ挿入部分で、canvasタグを下記のようにdivタグで囲いスタイル指定します。

<div class="chart-container" style="position: relative; width: 100%; height: 400px;">
　　<canvas id="myChart"></canvas>
</div>

positionはrelativeを、
widthとheightはピクセル指定または％指定ができます。

アスペクト比の維持を解除

先程のオプション指定部分に下記のように書き込みます。

options: {
　　maintainAspectRatio: false
}