Chart.jsインストール

libe-irevo@master 2023年12月29日

npmを使用してインストールするか、CDNを利用します。
今回はCDNで。

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

# npmを使用する場合はこのコマンドを実行する
npm install chart.js

グラフ描画領域は、canvasタグで指定することができます。

<canvas id="chart"></canvas>

canvas要素のコンテキストを取得して、これに描画のための情報をセットしていきます。

let ctx = document.getElementById('chart');

描画に必要な要素

Chart.jsでは、type, data, optionsの3要素を指定してグラフの描画を行います。

typeではグラフの種類を指定します。
typeで定めた値によって、どの形でグラフが描画されるのかが決定します。

dataではグラフに表示するラベルや、データなどの値を設定します。
dataにはさまざまなプロパティを設定することができます。
以下、プロパティの一例です。

optionsではアニメーションの設定やX軸・Y軸の設定など、グラフに関するオプション設定を変更することができます。(以下は一例)