Chart.jsを使ってWeb画面にグラフを描画する
Chart.jsを使って、Web画面にグラフを描画する方法です。
今回は、Node.jsで動作させます。
インストール
- node_modules/chart.js/distから次のファイルをクライアントが見える位置にコピーする
chart.umd.js
chart.umd.js.map
- ビューのファイルから、スクリプトファイルを読み込む
- 以下の構文で、キャンバスにグラフを描画する
config
の内容については後述。
サンプル。
コンフィグ
コンフィグには以下の内容を記載する。
type
- グラフの種別を指定するdata
- グラフのデータを指定する。複数のデータセットを指定可能options
- オプション。以下の指定が可能responsive
- レスポンシブ指定maintainAspectRatio
- アスペクト比をキープするかどうか。横幅のみレスポンシブにしたい場合はfalse
を指定するscales
- y軸に情報を指定するplugins
- プラグイン情報を指定するtitle
- グラフのタイトル情報legend
- グラフの凡例情報
各項目の詳細は、Chart.js Samplesにあります
data
data
にはグラフのデータを格納します。
labels
- X軸の目盛りラベル配列datasets
- データ系列の配列
data.datasets
label
- データ名data
- 値の配列。データがない場合はundefined
を指定するborderWidth
- 線の幅borderColor
- 線の色backgroundColor
- プロットする点の背景。配列で指定して各値ごとに色を指定も可能
データなしを含む場合
Lineチャート
type
にline
を指定します。

Barチャート
type
にbar
を指定します。

ドーナツ
type
にdoughnut
を指定します。data
の合計を100%として、各割合で描画します。
datasets
を追加すると内部にドーナツが増えます。hoverOffset
はマウスオーバー時にグラフが浮き出る量、cutout
は中心の大きさを指定します。
data
とbackgroundColor
にlabels
より多い値を追加することで、「その他」などを表現できます。

レーダーチャート
type
にradar
を指定します。全データの最小値が中心の値になります。

Chart.jsでは、これら以外にも色々なグラフが描画できます。詳しくは、Chart.js Samplesを参照してください。