【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行目）

【Chart.js使ってみた】使うための準備｜ LUCKLOG
https://lucklog.info/chart-js-first/
まず、Chart.jsを読み込みます。ファイルをダウンロードしたり、CDNから読み込んだりできます。ここではCDNの方法をご説明します。 CDNから読み込む下記ページにアクセスします。 https://www.jsde …