【Chart.js使ってみた】基本形を知る

canvasタグの設置とjavascriptの記述が必要です。

canvasタグ

<div class="chart-wrap">
  <canvas id="myChart" width="400" height="200"></canvas>
</div>

上記のタグを記述します。

width=400とheight=200は比率という理解で問題ないです。つまり幅800pxですと高さ400px、幅200pxですと高さは100pxになります。※レスポンシブ機能がデフォルトでTrueになっているためかと思います

また、divタグで囲んでおくと便利です。canvasは幅100%で表示されますので、divの方でpaddingなどを設定すると、両端に隙間を簡単に作ることができます。

Chart作成

※下記ソース上をクリックするとコピーできます

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0/dist/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Green', 'Blue'],
        datasets: [{
            label: 'RGB',
            data: [12, 19, 3],
            backgroundColor: [
                'rgba(255, 0, 0, 0.2)',
                'rgba(0, 255, 0, 0.2)',
                'rgba(0, 0, 255, 0.2)',
            ],
            borderColor: [
                'rgba(255, 0, 0, 1)',
                'rgba(0, 255, 0, 1)',
                'rgba(0, 0, 255, 1)',
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

まずは、本家のサンプルをRGBだけに絞ったものを書いてみました。

下記を参考にしています。
https://www.chartjs.org/docs/latest/getting-started/usage.html

CDNの読込用URLの取得はこちら(1行目)

基本形

「new Chart()」によってグラフを描画します。「new Chart()」の引数が重要です。

以下、ざっとした説明です。なんとなく雰囲気だけ掴めればOKです。

1つ目(コンテキスト)
描画するcanvasがどれかを指定する。getContext(‘2d’)は描画をONにするという感じです。

2つ目(描画情報)
labelsが縦軸、datasetsが横軸の情報になります。

3つ目(オプション)
グラフに関するオプションです。いろいろと設定できます。例えば、上記にあげた「beginAtZero: true」だと「yAxes」の中にあるので、Y軸を0から始めるかどうかを指定できます。実際にFalseにすると、0ではなく2からスタートしました。

実際に表示

実際にグラフを作成できました。
bodyタグ内に上記「Chart作成」のタグを書き、上記「Chart作成」のscriptをそのまま貼り付けるだけで実際に自分でもグラフを作れるかと思います。

自分でやって動作するのが使えるようになるための第一歩です。まずはコピペでOKです。是非お試しください。

おまけ

beginAtZero: falseとした場合です。縦軸が2から始まっていますよね。
コピペで描画できた後は少しだけ値を変更してどこが変わるかチェックしてみると勉強になります。

まとめ

基本形でのグラフの描画ができました。