【コピペOK】グラフ化入門｜アンケート結果を円・棒・横棒で見せるWebツールの作り方

アンケートを取ったものの、集計結果を表にまとめるだけでは、
「ぱっと見で分かりにくい」「人に説明しづらい」なんてことはありませんか？

そこでおすすめなのがグラフ化です。
データを円グラフ・棒グラフ・横棒グラフなどにすれば、一目で傾向が分かり、説得力もアップします。

この記事では、初心者でもコピペで完成できる「アンケート結果グラフ化Webツール」の作り方を、
HTML・CSS・JavaScriptを使ってわかりやすく解説します。
しかも今回のツールは無料で使えて、インストール不要、ブラウザだけで動作します。

「Chart.jsを初めて使う」
「コードはよくわからないけど作ってみたい」
「自分専用の集計ツールがほしい」

そんな方でも、この記事を読みながら手順通り進めれば、
そのまま使える完成版ツールが作れるので安心です。

では早速、グラフ化の魅力から見ていきましょう。

アンケート結果をグラフ化するメリット

アンケートの集計結果を表だけでまとめる方法もありますが、グラフにすることで得られるメリットはたくさんあります。特に、プレゼンやレポート、ブログ記事などでは、グラフ化によって情報がより直感的に伝わります。

1. 一目で傾向がわかる

文章や数字の羅列よりも、色と形でデータの割合や差が把握できるため、初めて見る人でも直感的に理解できます。

2. 説得力が増す

数字だけでは伝わりにくい情報も、視覚的なインパクトで印象に残りやすくなります。特に会議やプレゼンでの資料では、グラフがあるだけで説得力が格段にアップします。

3. 比較がしやすい

棒グラフや横棒グラフを使えば、項目ごとの比較が容易になります。アンケート結果を分析する際も、どの項目が人気なのかがひと目でわかります。

4. データ共有がスムーズ

グラフ化した画像をスクリーンショットやPDFで共有すれば、受け取った側も説明なしで内容を把握できます。オンライン会議やメールでのやり取りにも便利です。

データを“伝える”だけじゃなく、“伝わる”形にするのがグラフ化の目的なんだよ。数字は正確さ、グラフは分かりやすさをプラスしてくれるんだ。

ほーく

今回作るツールの完成イメージ

今回ご紹介する「アンケート結果グラフ化ツール」は、単一のHTMLファイルだけで動作し、ブラウザがあればすぐに使えるシンプル設計です。
インストール不要・サーバー不要で、初心者の方でもすぐに試せます。

完成イメージ

入力エリアにアンケート項目と票数を入力
「グラフを作成」ボタンを押すと、円グラフ・棒グラフ・横棒グラフを表示
グラフには票数が常時表示され、視覚的に分かりやすい
項目名が長すぎる場合は自動で省略される

このツールでできること

会議や授業のアンケート結果をすぐに可視化
ブログやSNSで結果を画像として共有
複雑な集計ソフト不要で手軽にグラフ作成

【実際のアンケート集計結果グラフ化ツールの動作を試してみたい方はこちらからどうぞ】▼

: 【無料】アンケート集計＆グラフ化が一瞬でできるWebツール｜円・棒・横棒グラフ対応
アンケート結果を集計して、きれいなグラフにまとめたい…でも、Excelの操作は苦手だし、グラフの設定に時間がかかる。そんな経験はありませんか？そこでおすすめなのが、アンケート集計＆グラフ化が一瞬でで ...

このツールの魅力は“すぐ試せる”ことだよ。インストールや設定はいらないから、思いついたらすぐデータを入れて試せるんだ。

ほーく

作成に必要な知識と準備

この「アンケート結果グラフ化ツール」は、HTML・CSS・JavaScriptの基本知識があれば十分に作れます。
難しいアルゴリズムやサーバー構築は不要なので、初心者でも安心です。

必要な知識

HTML
ページの構造を作るための言語。入力フォームやボタン、グラフ表示エリアを作るのに使用します。
CSS
ページの見た目を整えるためのスタイル設定。背景色、文字の大きさ、余白の調整などを行います。
JavaScript
ページに動きをつけるための言語。今回のツールでは、入力データを読み取り、グラフを描画する処理を担当します。

使用するライブラリ

Chart.js
簡単に美しいグラフを描画できるJavaScriptライブラリ。円グラフ・棒グラフ・横棒グラフを同時に作成できます。
CDN経由で読み込むだけで利用可能です。

準備するもの

テキストエディタ（例：VS Code, Sublime Text, メモ帳でも可）
Webブラウザ（Chrome, Edge, Firefox など）
インターネット接続（Chart.jsの読み込みに必要）

難易度と所要時間

難易度：初級〜中級
所要時間：30分〜1時間程度（コピペ活用で短縮可能）

HTML・CSS・JavaScriptの基本が分かっていれば大丈夫だよ。Chart.jsがグラフ部分を全部やってくれるから、ゼロから描画ロジックを書く必要はないんだ。

ほーく

実際に作ってみよう（ステップ解説）

ここからは、実際にアンケート結果をグラフ化するWebツールを作っていきます。
今回は、HTML・CSS・JavaScriptの3つのパートに分けて説明しますので、初心者の方でも迷わず進められます。

ステップ0：HTMLファイルの作成と実行方法

パソコンの任意の場所に、新しいフォルダを作ります（例：survey-graph-tool）。
メモ帳やVS Codeなどのエディタを開き、空のファイルを作成します。
ファイル名を index.html として保存します。
作ったファイルをブラウザ（ChromeやEdge）にドラッグ＆ドロップすると、そのHTMLが表示されます。

まずは土台となるHTMLファイルを作ることが第一歩です。ファイル名は必ず .html にしましょう！

ほーく

ステップ1：HTMLの基本構造を作る

HTMLはWebページの骨組みを作る言語です。
以下のコードを index.html に入力してください。
ここでは、グラフ表示や入力欄などの要素だけを配置します（デザインや動作は後で追加します）。
※この後の CSS と JavaScript は、このHTMLの中の <style> と <script> に追記していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>アンケート結果グラフ化ツール（円・棒・横棒）</title>

  <!-- ▼ CSSは次のステップ2でここに挿入します -->
  <style></style>

  <!-- ▼ Chart.js本体 & データラベル用プラグイン（CDN）※必須ライブラリ -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
</head>
<body>

  <h1>アンケート結果グラフ化ツール（円・棒・横棒）</h1>

  <table id="data" aria-label="入力テーブル">
    <thead>
      <tr>
        <th style="width:60%">項目名</th>
        <th style="width:25%">票数</th>
        <th style="width:15%">操作</th>
      </tr>
    </thead>
    <tbody id="rows"></tbody>
  </table>

  <div class="controls">
    <button id="addRow">＋ 行を追加</button>
    <button id="clearRows">入力をクリア</button>
    <span style="margin-left:auto"></span>
    <label><input type="radio" name="ctype" value="pie" checked> 円</label>
    <label><input type="radio" name="ctype" value="bar"> 棒</label>
    <label><input type="radio" name="ctype" value="hbar"> 横棒</label>
    <button id="render">グラフ更新</button>
  </div>

  <div class="canvas-wrap">
    <canvas id="chart" aria-label="グラフ" role="img"></canvas>
  </div>

  <!-- ▼ JSは次のステップ3でここに挿入します -->
  <script></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>アンケート結果グラフ化ツール（円・棒・横棒）</title>

</head>

<body>

<h1>アンケート結果グラフ化ツール（円・棒・横棒）</h1>

<thead>

<tr>

</tr>

</thead>

</table>

<button id="clearRows">入力をクリア</button>

<button id="render">グラフ更新</button>

</div>

</div>

</body>

</html>

ステップ2：CSSで見た目を整える

さきほどの HTML の <style></style> に、次の内容をそのままいれてください。

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Meiryo,sans-serif;margin:24px;color:#333;background:#fff}
h1{font-size:22px;margin:0 0 12px}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
thead th{color:#666;text-align:left;padding:6px 8px}
tbody tr{background:#fff;border:1px solid #e5e7eb}
tbody td{padding:8px 10px;vertical-align:middle}
tbody tr td:first-child{border-radius:8px 0 0 8px}
tbody tr td:last-child{border-radius:0 8px 8px 0}
input[type="text"],input[type="number"]{width:100%;height:32px;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}
input[type="number"]{text-align:right}
button{height:32px;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;background:#f4f4f5;cursor:pointer}
button:hover{background:#eee}
.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.canvas-wrap{height:360px;border:1px solid #e5e7eb;border-radius:12px;padding:8px}

body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Meiryo,sans-serif;margin:24px;color:#333;background:#fff}

h1{font-size:22px;margin:0 0 12px}

table{width:100%;border-collapse:separate;border-spacing:0 8px}

thead th{color:#666;text-align:left;padding:6px 8px}

tbody tr{background:#fff;border:1px solid #e5e7eb}

tbody td{padding:8px 10px;vertical-align:middle}

tbody tr td:first-child{border-radius:8px 0 0 8px}

tbody tr td:last-child{border-radius:0 8px 8px 0}

input[type="text"],input[type="number"]{width:100%;height:32px;padding:6px 8px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}

input[type="number"]{text-align:right}

button{height:32px;padding:6px 10px;border:1px solid #d1d5db;border-radius:6px;background:#f4f4f5;cursor:pointer}

button:hover{background:#eee}

.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}

.canvas-wrap{height:360px;border:1px solid #e5e7eb;border-radius:12px;padding:8px}

CSSを使うと見た目が一気に整います。背景や文字の色は自由に変えてOKです！

ほーく

ステップ3：JavaScriptでグラフ描画を実装

HTMLの一番下にある <script></script> に、次の内容をそのままいれてください。
※ここで Chart.jsプラグインの登録 と 常時ラベル表示、省略表示 も入っています。

// プラグイン登録（数値ラベル常時表示）
Chart.register(ChartDataLabels);

const tbody = document.getElementById('rows');
const addRowBtn = document.getElementById('addRow');
const clearRowsBtn = document.getElementById('clearRows');
const renderBtn = document.getElementById('render');
let chart;

// 表示短縮用（項目名が長いときは12文字+…）
const trimLabel = (s, n=12) => s.length>n ? s.slice(0,n)+'…' : s;

function addRow(label='', value=''){
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td><input type="text" maxlength="20" placeholder="例：A案" value="${label}"></td>
    <td><input type="number" min="0" step="1" value="${value||0}"></td>
    <td style="text-align:center"><button class="del">削除</button></td>`;
  tr.querySelector('.del').addEventListener('click', ()=> tr.remove());
  tbody.appendChild(tr);
}

function clearRows(){ tbody.innerHTML=''; addRow(); addRow(); }

function collect(){
  const labels=[], values=[];
  for(const tr of tbody.querySelectorAll('tr')){
    const name = tr.querySelector('input[type="text"]').value.trim();
    const vStr = tr.querySelector('input[type="number"]').value.trim();
    if(!name && !vStr) continue;
    if(!name) throw new Error('項目名が未入力の行があります。');
    if(vStr==='') throw new Error('票数が未入力の行があります。');
    const v = Number(vStr);
    if(Number.isNaN(v) || v < 0) throw new Error('票数は0以上の整数で入力してください。');
    labels.push(trimLabel(name)); values.push(v);
  }
  if(labels.length < 2) throw new Error('2つ以上のデータを入力してください。');
  if(values.every(x=>x===0)) throw new Error('票数がすべて0です。');
  return { labels, values };
}

function palette(n){
  const arr=[]; for(let i=0;i<n;i++){ arr.push(`hsl(${Math.round(360/n*i)} 70% 55%)`);} return arr;
}

function render(){
  try{
    const typeRaw = document.querySelector('input[name="ctype"]:checked').value;
    const { labels, values } = collect();
    const colors = palette(labels.length);

    const data = typeRaw==='pie'
      ? { labels, datasets:[{ data: values, backgroundColor: colors, borderColor:'#fff', borderWidth:2 }] }
      : { labels, datasets:[{ label:'票数', data: values, backgroundColor: colors, borderColor:'#888', borderWidth:1 }] };

    const options = {
      responsive:true, maintainAspectRatio:false, scales:{},
      plugins:{
        legend:{ position:'bottom' },
        tooltip:{ enabled:true },
        datalabels:{
          formatter:(v,ctx)=>{
            if(ctx.chart.config.type==='pie'){
              const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);
              const pct = total ? (v/total*100).toFixed(1)+'%' : '0%';
              return `${v} (${pct})`;
            }
            return String(v);
          },
          anchor:(ctx)=> ctx.chart.config.type==='pie'?'center':'end',
          align:(ctx)=>  ctx.chart.config.type==='pie'?'center':'end',
          color:(ctx)=>  ctx.chart.config.type==='pie'?'#fff':'#333',
          font:{weight:600}, offset:4, clamp:true
        }
      }
    };

    let type = typeRaw;
    if(typeRaw!=='pie'){ type='bar'; if(typeRaw==='hbar') options.indexAxis='y'; }

    if(chart) chart.destroy();
    chart = new Chart(document.getElementById('chart'), { type, data, options });
  }catch(e){
    alert(e.message);
  }
}

// イベント
addRowBtn.addEventListener('click', ()=> addRow());
clearRowsBtn.addEventListener('click', clearRows);
renderBtn.addEventListener('click', render);
tbody.addEventListener('keydown', e => { if(e.key==='Enter'){ e.preventDefault(); render(); } });

// 初期行＋初回描画（完成版と同じサンプル）
addRow('A案',12); addRow('B案',8); addRow('C案',5); addRow('D案',3);
render();

// プラグイン登録（数値ラベル常時表示）

Chart.register(ChartDataLabels);

const tbody = document.getElementById('rows');

const addRowBtn = document.getElementById('addRow');

const clearRowsBtn = document.getElementById('clearRows');

const renderBtn = document.getElementById('render');

let chart;

// 表示短縮用（項目名が長いときは12文字+…）

const trimLabel = (s, n=12) => s.length>n ? s.slice(0,n)+'…' : s;

function addRow(label='', value=''){

const tr = document.createElement('tr');

tr.innerHTML = `

<td style="text-align:center"><button class="del">削除</button></td>`;

tr.querySelector('.del').addEventListener('click', ()=> tr.remove());

tbody.appendChild(tr);

}

function clearRows(){ tbody.innerHTML=''; addRow(); addRow(); }

function collect(){

const labels=[], values=[];

for(const tr of tbody.querySelectorAll('tr')){

const name = tr.querySelector('input[type="text"]').value.trim();

const vStr = tr.querySelector('input[type="number"]').value.trim();

if(!name && !vStr) continue;

if(!name) throw new Error('項目名が未入力の行があります。');

if(vStr==='') throw new Error('票数が未入力の行があります。');

const v = Number(vStr);

if(Number.isNaN(v) || v < 0) throw new Error('票数は0以上の整数で入力してください。');

labels.push(trimLabel(name)); values.push(v);

}

if(labels.length < 2) throw new Error('2つ以上のデータを入力してください。');

if(values.every(x=>x===0)) throw new Error('票数がすべて0です。');

return { labels, values };

}

function palette(n){

const arr=[]; for(let i=0;i<n;i++){ arr.push(`hsl(${Math.round(360/n*i)} 70% 55%)`);} return arr;

}

function render(){

try{

const typeRaw = document.querySelector('input[name="ctype"]:checked').value;

const { labels, values } = collect();

const colors = palette(labels.length);

const data = typeRaw==='pie'

? { labels, datasets:[{ data: values, backgroundColor: colors, borderColor:'#fff', borderWidth:2 }] }

: { labels, datasets:[{ label:'票数', data: values, backgroundColor: colors, borderColor:'#888', borderWidth:1 }] };

const options = {

responsive:true, maintainAspectRatio:false, scales:{},

plugins:{

legend:{ position:'bottom' },

tooltip:{ enabled:true },

datalabels:{

formatter:(v,ctx)=>{

if(ctx.chart.config.type==='pie'){

const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);

const pct = total ? (v/total*100).toFixed(1)+'%' : '0%';

return `${v} (${pct})`;

}

return String(v);

anchor:(ctx)=> ctx.chart.config.type==='pie'?'center':'end',

align:(ctx)=> ctx.chart.config.type==='pie'?'center':'end',

color:(ctx)=> ctx.chart.config.type==='pie'?'#fff':'#333',

font:{weight:600}, offset:4, clamp:true

}

};

let type = typeRaw;

if(typeRaw!=='pie'){ type='bar'; if(typeRaw==='hbar') options.indexAxis='y'; }

if(chart) chart.destroy();

chart = new Chart(document.getElementById('chart'), { type, data, options });

}catch(e){

alert(e.message);

}

// イベント

addRowBtn.addEventListener('click', ()=> addRow());

clearRowsBtn.addEventListener('click', clearRows);

renderBtn.addEventListener('click', render);

tbody.addEventListener('keydown', e => { if(e.key==='Enter'){ e.preventDefault(); render(); } });

// 初期行＋初回描画（完成版と同じサンプル）

addRow('A案',12); addRow('B案',8); addRow('C案',5); addRow('D案',3);

render();

すぐに動作確認する手順

上記を index.html として保存
ダブルクリックでブラウザ起動
表の「項目名」「票数」を編集 → ［グラフ更新］ か Enterキーで反映
円／棒／横棒はラジオボタンで切替

コードの詳細解説（しくみを理解しよう）

ここからは、完成コードをパーツごとに分解して仕組みを解説します。
読むだけでOK。必要があれば、気になる箇所だけコードに戻って見比べてください。

HTML：ページの骨組み

役割：入力テーブル・操作ボタン・グラフ表示領域（<canvas>）を用意します。

<table id="data"> / <tbody id="rows">
→ 項目名・票数・削除ボタンの行を動的に追加する箱。
ラジオボタン（type="radio"name="ctype"）
→ 円／棒／横棒の切り替えを選ぶUI。
<canvas id="chart">
→ Chart.jsがグラフを描画するキャンバス。

CSS：読みやすい白ベース＆コンパクトUI

狙い：誰が見ても迷わない“キレイ”な見た目。

border-spacing: 0 8px ＋行に薄い枠
→ 行をカード風に見せ、項目名と票数の詰まり感を解消。
入力欄・ボタンは高さ32pxで統一
→ パーツのサイズが揃うと視線移動が楽になり、入力ミスが減る。
.controls をフレックスに
→ ラジオボタンとボタン群を1行で整理、スマホでも折り返し。

JavaScript：入力 → 整形 → 描画の流れ

(1) 初期化とイベント

addRow()：行の追加
clearRows()：入力リセット
render()：集める→検証→描画を実行
最後に初期行を追加 → render() で、読み込み直後からグラフが出ます

(2) データ収集 `collect()`

各行から項目名（text）と票数（number）を取得
バリデーション（入力チェック）で未入力・負数・全部0を排除
長い項目名は12文字で省略（trimLabel()）

用語メモ：バリデーション…間違った入力を弾く仕組み。ユーザー体験と不具合防止の要。

(3) パレット作成 `palette(n)`

データ数に応じたHSL色を自動生成
視認性が高く、色の被りを減らす単純で強力な方法

(4) 描画 `render()`

グラフ種別：pie：円 / bar：棒 / hbar：横棒を判定
- 横棒は indexAxis:'y' を付与
data を作成
- 円グラフは data のみ、棒系は label:'票数' を付ける
options を設定
- legend・tooltip はON
- datalabelsプラグインで値を常時表示
- 円グラフ時は割合(%)を併記
既存チャートを destroy() → 新規 new Chart(...)

用語メモ：プラグイン…Chart.jsを拡張する追加機能。ここではラベル常時表示を実現。

エラーハンドリングとユーザー体験

try/catch（render()内）で入力エラー時に alert(e.message)
→ どこが悪いか日本語で即通知。
Enterキーで即描画（tbody.addEventListener('keydown', …)）
→ スマートなインタラクションで操作ストレスを軽減。

Chart.jsの使い方・実務でよく使う基本

1) まずは最小コード

<!-- 1. 読み込み（UMD版） -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>

<!-- 2. HTMLにキャンバス -->
<canvas id="myChart"></canvas>

<!-- 3. JSで描画 -->
<script>
  const ctx = document.getElementById('myChart');
  const chart = new Chart(ctx, {
    type: 'bar',                      // 'pie' | 'bar' | 'line' など
    data: {
      labels: ['A','B','C'],         // X軸や区分のラベル
      datasets: [{
        label: '票数',
        data: [12, 8, 5],            // 各ラベルに対応する値
        backgroundColor: ['#4e79a7','#f28e2b','#e15759']
      }]
    },
    options: {
      responsive: true,              // 親要素サイズに追従
      maintainAspectRatio: false     // 親の高さを優先（レイアウトしやすい）
    }
  });
</script>

const ctx = document.getElementById('myChart');

const chart = new Chart(ctx, {

type: 'bar', // 'pie' | 'bar' | 'line' など

data: {

labels: ['A','B','C'], // X軸や区分のラベル

datasets: [{

label: '票数',

data: [12, 8, 5], // 各ラベルに対応する値

backgroundColor: ['#4e79a7','#f28e2b','#e15759']

}]

options: {

responsive: true, // 親要素サイズに追従

maintainAspectRatio: false // 親の高さを優先（レイアウトしやすい）

}

});

</script>

type / data / options の3つが柱。まずは小さく動かしてから必要なオプションを足していこう。

ほーく

2) よく使うオプション

options: {
  responsive: true,
  maintainAspectRatio: false,
  plugins: {
    legend:  { position: 'bottom' }, // 凡例の位置
    tooltip: { enabled: true }       // ツールチップ
  },
  scales: {                          // 棒・折れ線など軸があるタイプで使用
    x: { grid: { display: false } },
    y: { beginAtZero: true, grid: { color: '#eee' } }
  }
}

options: {

responsive: true,

maintainAspectRatio: false,

plugins: {

legend: { position: 'bottom' }, // 凡例の位置

tooltip: { enabled: true } // ツールチップ

scales: { // 棒・折れ線など軸があるタイプで使用

x: { grid: { display: false } },

y: { beginAtZero: true, grid: { color: '#eee' } }

}

3) データの入れ替え・更新

1回きりで作り直すなら：chart.destroy(); new Chart(...)
頻繁更新するなら：

chart.data.labels = ['X','Y','Z'];
chart.data.datasets[0].data = [5,9,2];
chart.update(); // 軽量に反映

chart.data.labels = ['X','Y','Z'];

chart.data.datasets[0].data = [5,9,2];

chart.update(); // 軽量に反映

よくあるエラー：「描画が重なる」→ destroy() 忘れが原因（新規生成のたびに破棄してから作る）。

値を“常時表示”する：chartjs-plugin-datalabels

目的：ツールチップの「ホバー時のみ」ではなく、グラフ上に値を常時描画する。
Chart.js本体には常時表示機能はないため、公式プラグインの chartjs-plugin-datalabels を使います。

1) 読み込みと登録

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0"></script>
<script>
  Chart.register(ChartDataLabels); // ← これを忘れると表示されません
</script>

Chart.register(ChartDataLabels); // ← これを忘れると表示されません

</script>

“読み込む”だけではダメで、register が必須です。

ほーく

2) いちばん簡単な設定

options.plugins.datalabelsを設定します。

options: {
  plugins: {
    datalabels: {
      color: '#333',
      font: { weight: 600 },
      align: 'end',   // 棒：end/top/bottom など
      anchor: 'end',  // 棒：どこを基準に出すか
      formatter: (value) => String(value) // 値の加工（文字列化・単位付与など）
    }
  }
}

options: {

plugins: {

datalabels: {

color: '#333',

font: { weight: 600 },

align: 'end', // 棒：end/top/bottom など

anchor: 'end', // 棒：どこを基準に出すか

formatter: (value) => String(value) // 値の加工（文字列化・単位付与など）

}

棒グラフ：align:'end', anchor:'end' が扱いやすい
ラベルが重なるときは offset（px）を足したり、フォントを小さくする

3) 円グラフでは割合(%)も併記

options: {
  plugins: {
    datalabels: {
      color: '#fff',
      anchor: 'center',
      align: 'center',
      formatter: (value, ctx) => {
        const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);
        const pct = total ? (value/total*100).toFixed(1) + '%' : '0%';
        return `${value} (${pct})`; // 例：12 (34.3%)
      }
    }
  }
}

options: {

plugins: {

datalabels: {

color: '#fff',

anchor: 'center',

align: 'center',

formatter: (value, ctx) => {

const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);

const pct = total ? (value/total*100).toFixed(1) + '%' : '0%';

return `${value} (${pct})`; // 例：12 (34.3%)

}

円グラフは中央寄せが見やすい（anchor/align: 'center'）
背景色が暗いなら color:'#fff' のほうが可読性◎

応用カスタマイズ（必要なところだけコピペ）

「まずは動いた！次は“自分用”に仕上げたい」――そんなときの実用カスタマイズ集です。
手を入れる場所を明示し、差し替えコピペで迷わない形にしています。

色をブランドカラーに固定する

palette() を固定配列に差し替えます。

// 置き換え：好きな色を並べる（足りないと繰り返しになる想定）
function palette(n){
  const base = ['#0ea5e9','#22c55e','#f59e0b','#ef4444','#8b5cf6','#10b981'];
  return Array.from({length:n}, (_,i)=> base[i % base.length]);
}

// 置き換え：好きな色を並べる（足りないと繰り返しになる想定）

function palette(n){

const base = ['#0ea5e9','#22c55e','#f59e0b','#ef4444','#8b5cf6','#10b981'];

return Array.from({length:n}, (_,i)=> base[i % base.length]);

}

値に単位を付ける（「人」「票」「件」など）

options.plugins.datalabels.formatter を追記。

datalabels:{
  formatter:(v,ctx)=>{
    if(ctx.chart.config.type==='pie'){
      const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);
      const pct = total ? (v/total*100).toFixed(1)+'%' : '0%';
      return `${v}票 (${pct})`;   // ← 単位を付与
    }
    return `${v}票`;              // ← 棒・横棒
  },
  /* 省略 */
}

datalabels:{

formatter:(v,ctx)=>{

if(ctx.chart.config.type==='pie'){

const total = ctx.dataset.data.reduce((a,b)=>a+(+b||0),0);

const pct = total ? (v/total*100).toFixed(1)+'%' : '0%';

return `${v}票 (${pct})`; // ← 単位を付与

}

return `${v}票`; // ← 棒・横棒

/* 省略 */

}

入力できる行数に上限を付ける

addRow() の先頭に制限を追加（例：最大10行）。

function addRow(label='', value=''){
  if(tbody.querySelectorAll('tr').length >= 10){
    alert('項目は最大10件までです。'); return;
  }
  /* 既存処理 */
}

function addRow(label='', value=''){

if(tbody.querySelectorAll('tr').length >= 10){

alert('項目は最大10件までです。'); return;

}

/* 既存処理 */

}

全部やる必要はないよ。必要なところだけ摘み取って、自分のツールを育てていこう！

ほーく

おすすめの学習リソース｜HTMLやJavaScriptをさらに学びたい方へ

「もっと作りたい！」「コードの意味をちゃんと理解したい！」という方に、
初心者でもスムーズに学べて、今回のようなツール作りに直結する厳選教材をご紹介します。

まとめ｜アンケート結果をグラフ化できるWebツールは初心者でも作れる

今回の記事では、アンケート結果を円グラフ・棒グラフ・横棒グラフで可視化するWebツールの作り方をご紹介しました。

HTML・CSS・JavaScriptを組み合わせれば、初心者でも短時間でグラフ化ツールを作れる
Chart.jsを使えば、美しいグラフを簡単に描画できる
chartjs-plugin-datalabels を活用すると、値を常時表示できて見やすさがアップする
入力フォームやデザインを工夫すれば、業務・学習・プレゼンなど幅広く活用可能

アンケート集計ツールは、ちょっとした社内調査やイベントの集計、学習教材の作成などにも応用できます。
ぜひ今回のサンプルコードをベースに、自分だけの便利なWebツールを作ってみてください。

「コードをコピペして動かす」→「少しずつ改造する」→「オリジナル機能を追加する」
この流れで学べば、自然とWeb開発スキルが身につきますよ！

ほーく

【実際のアンケート集計結果グラフ化ツールの動作を試してみたい方はこちらからどうぞ】▼

: 【無料】アンケート集計＆グラフ化が一瞬でできるWebツール｜円・棒・横棒グラフ対応
アンケート結果を集計して、きれいなグラフにまとめたい…でも、Excelの操作は苦手だし、グラフの設定に時間がかかる。そんな経験はありませんか？そこでおすすめなのが、アンケート集計＆グラフ化が一瞬でで ...

【コピペOK】グラフ化入門｜アンケート結果を円・棒・横棒で見せるWebツールの作り方

アンケート結果をグラフ化するメリット

1. 一目で傾向がわかる

2. 説得力が増す

3. 比較がしやすい

4. データ共有がスムーズ

今回作るツールの完成イメージ

完成イメージ

このツールでできること

作成に必要な知識と準備

必要な知識

使用するライブラリ

準備するもの

難易度と所要時間

実際に作ってみよう（ステップ解説）

ステップ0：HTMLファイルの作成と実行方法

ステップ1：HTMLの基本構造を作る

ステップ2：CSSで見た目を整える

ステップ3：JavaScriptでグラフ描画を実装

すぐに動作確認する手順

コードの詳細解説（しくみを理解しよう）

HTML：ページの骨組み

CSS：読みやすい白ベース＆コンパクトUI

JavaScript：入力 → 整形 → 描画 の流れ

(1) 初期化とイベント

(2) データ収集 collect()

(3) パレット作成 palette(n)

(4) 描画 render()

エラーハンドリングとユーザー体験

Chart.jsの使い方・実務でよく使う基本

1) まずは最小コード

2) よく使うオプション

3) データの入れ替え・更新

値を“常時表示”する：chartjs-plugin-datalabels

1) 読み込みと登録

2) いちばん簡単な設定

3) 円グラフでは割合(%)も併記

応用カスタマイズ（必要なところだけコピペ）

色をブランドカラーに固定する

値に単位を付ける（「人」「票」「件」など）

入力できる行数に上限を付ける

おすすめの学習リソース｜HTMLやJavaScriptをさらに学びたい方へ

おすすめの書籍

『確かな力が身につくJavaScript超入門』（SBクリエイティブ）

『スラスラわかるHTML＆CSSのきほん』（SBクリエイティブ）

おすすめのオンライン講座

Udemy｜世界最大級のオンライン学習プラットフォーム

まとめ｜アンケート結果をグラフ化できるWebツールは初心者でも作れる

関連記事

JavaScript：入力 → 整形 → 描画の流れ

(2) データ収集 `collect()`

(3) パレット作成 `palette(n)`

(4) 描画 `render()`