フレームワークを整える
初級Chart.js を整える。
＝ CSV から棒・折れ線・円・複合グラフを描いて確かめる練習場
サンプルコード（クリックでエディタに挿入）
「▶ 実行」を押すと、ここにグラフが表示されます。
CONSOLE
console.log の出力とエラーがここに出ます。
データ欄の1行目は見出し（1列目はラベル、2列目以降が系列名）、2行目以降の1列目がラベル・2列目以降が数値です。数値として読めないセルがあると、データ欄の下にエラーを表示します。
Chart.js の構造は「種類・データ・設定」の3点セット。
new Chart(ctx, { type, data, options }) の3つを組み合わせるだけで、上のどのグラフも同じ書き方で描けます。
- ①
棒グラフ — type: 'bar'
月別の値を縦棒で並べて比較します。データセット（
datasets）が1つだけの、もっとも基本の形です。 - ②
折れ線（複数系列） — type: 'line'、tension
データ欄の見出しを2列以上にすると、系列（
datasets）が自動で増えます。tensionを0〜1で指定すると、線の角がなだらかな曲線になります。 - ③
円・ドーナツ — type: 'pie' / 'doughnut'
内訳の割合を見せるグラフです。複数の系列があっても最初の1つ（datasets[0]）しか使われないという Chart.js の仕様に注意してください。
- ④
複合（棒＋折れ線・2軸） — datasets ごとの type と scales
データセットごとに
typeを指定すると、1つのグラフに棒と折れ線を混在できます。単位が違う値はyAxisIDとoptions.scalesで左右2本の軸に分けます。
Excel のグラフ機能との対応
表計算ソフトでグラフを作るときの操作と、Chart.js の設定項目はほぼ1対1で対応します。
| Excel での操作 | Chart.js の設定 |
|---|---|
| グラフの種類を選ぶ（棒・折れ線・円 など） | type |
| セル範囲を選択してデータ系列にする | data.labels / data.datasets |
| 「軸の書式設定」で第2軸を追加する | options.scales と yAxisID |
| 系列の色・凡例・グラフタイトルを変える | backgroundColor / options.plugins |
実務では、集計済みの数値（月次売上・アンケート結果・KPI など）を Web ページやダッシュボードにそのまま埋め込みたいときに使われます。Excel と違って、データが変わった瞬間にグラフを自動で描き直せるのが大きな違いです。
このページについて
ライブラリは cdn.jsdelivr.net から読み込みます。
書いたコード（データ・JS設定）と実行結果は端末内で完結し、外部へ送信しません（送信ゼロ）。
プレビューはサンドボックス化した iframe で、このページや端末のデータには触れません。
🌐 「実行」を押した最初の1回だけ、Chart.js 4.4.8 を配信元の
cdn.jsdelivr.net から取得します。
これはプログラムを受け取るだけの通信で、書いたデータや実行結果が送られることはありません。
このツールについて
Chart.js は「データ」と「見た目・種類の設定」を分けて渡すと、キャンバスにグラフを描いてくれるライブラリです。ここでは CSV のデータと JS の設定を両方書き換えながら、その対応関係を確かめられます。
CSV データと JS 設定を書くだけで、その場にグラフが描ける練習場。棒・折れ線・円・複合の4課題。
主な機能
- CSV（1行目見出し・1列目ラベル）を自動でグラフ用データに変換
- 4課題（棒／折れ線／円・ドーナツ／複合・2軸）
- type・data・options という Chart.js の構造を書いて理解
- Excel のグラフとの対応表・送信ゼロ
よくある質問
Q. Chart.js とは何ですか？
A. HTML の canvas にグラフを描く JavaScript ライブラリです。データと設定（種類・見た目）を渡すだけでグラフを生成します。
Q. Excel のグラフと何が違いますか？
A. 考え方はほぼ同じ（種類・データ範囲・軸の設定）ですが、Web ページに埋め込め、データが変わった瞬間に自動で描き直せる点が異なります。
Q. 円グラフで複数の系列を渡すとどうなりますか？
A. Chart.js の pie と doughnut は最初の系列（datasets[0]）だけを使います。ページの解説にも明記しています。
入力値はURLの「#」以降に入るためサーバーには送信されません。リンクを開くと同じ状態を復元します。
