折れ線グラフ（Line Chart）— 複数系列の推移グラフ

グラフ・チャート初級更新：2026年05月29日

このコンポーネントについて

折れ線グラフは売上推移・アクセス数変化・気温変動など、時系列データの変化を視覚化するのに最適なグラフです。複数の系列を1つのグラフに重ねて描画することで、複数カテゴリーの比較も直感的に行えます。このページでは Chart.js v4（CDN）を使い、外部の JSON ファイルからデータを fetch して3系列の折れ線グラフを描画する実装を紹介します。

複数系列（3本線） — 製品A・B・Cの月別売上推移を3色の折れ線で描画。系列ごとに borderColor / backgroundColor を設定
なめらかな曲線 — tension: 0.3 で折れ線を適度にカーブさせ、データの流れを読みやすくする
塗りつぶしなし — fill: false でエリアを塗らず、線のみのシンプルな表示にする
JSON fetch でデータ分離 — グラフコードとデータを分けることで、デザインを変えずにデータだけを差し替えられる

実装のポイント・注意点

Chart.js v4 の折れ線グラフでは、datasets 配列の各エントリに tension（0〜1、0=折れ線・1=最大カーブ）を設定できます。0.3〜0.4 あたりが実務でよく使われる値です。fill: false を指定するとエリア塗りつぶしが無効になり線のみの表示になります。

複数系列のカラーは datasets の各エントリで個別に設定します。系列の数が増えてきたら色を配列で管理して map で適用するコードにすると、系列追加時の変更が楽になります（サンプルコードに示しています）。

JSON fetch でデータを取得する際、fetch は 同一オリジン または CORS を許可したサーバーからしか読み込めません。ローカルで index.html をダブルクリックして開くと file:// プロトコルになり fetch が失敗します。手元で動作確認する場合は VS Code の Live Server や Python の http.server など、ローカルサーバーを使って http:// で開いてください。

Y軸の beginAtZero: false（デフォルト）にすることで、グラフがデータの実際の変動幅を強調した表示になります。0を起点にするかはデータの性質に合わせて選んでください。

HTML・CSS・JavaScriptで実装しており、Chart.jsライブラリ（CDN）を1本追加するだけで動きます。フレームワーク不要でコピペすぐに使えます。

デモ

データを読み込んでいます...

サンプルソース

4つのファイルを同じフォルダに保存し、ローカルサーバー（VS Code Live Server 等）で index.html を開くと動作確認できます。
ファイル名：index.html / style.css / script.js / data/data.json — 保存時の文字コードは UTF-8 を指定してください。
⚠️ fetch は file:// では動作しません。ローカルサーバー経由（http://）で開いてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>折れ線グラフ サンプル</title>
  <link rel="stylesheet" href="./style.css">
  <!-- Chart.js v4（UMD ビルド） -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>
</head>
<body>

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

<script src="./script.js"></script>
</body>
</html>

body {
  font-family: sans-serif;
  padding: 24px;
  background: #F8FAFC;
}

.chart-wrap {
  max-width: 800px;
  height: 360px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

// 系列ごとの色定義
var COLORS = [
  { border: '#2B7FE8', bg: 'rgba(43, 127, 232, 0.1)' },
  { border: '#FB923C', bg: 'rgba(251, 146, 60, 0.1)' },
  { border: '#22C55E', bg: 'rgba(34, 197, 94, 0.1)' }
];

// data.json を fetch してグラフを描画する
document.addEventListener('DOMContentLoaded', function () {
  fetch('./data/data.json')
    .then(function (r) { return r.json(); })
    .then(function (data) {
      renderLineChart(data);
    })
    .catch(function (err) {
      console.error('データの取得に失敗しました:', err);
    });
});

function renderLineChart(data) {
  var ctx = document.getElementById('line-chart');

  // datasets を map して各系列に色を割り当てる
  var datasets = data.datasets.map(function (ds, i) {
    var color = COLORS[i] || COLORS[0];
    return {
      label: ds.label,
      data: ds.data,
      borderColor: color.border,
      backgroundColor: color.bg,
      borderWidth: 2,
      tension: 0.3,    // 0=折れ線、0.3=適度なカーブ
      fill: false,     // エリア塗りつぶしなし
      pointRadius: 4,
      pointHoverRadius: 6
    };
  });

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: data.labels,
      datasets: datasets
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: data.label,
          font: { size: 13 },
          padding: { bottom: 12 }
        }
      },
      scales: {
        y: {
          beginAtZero: false,
          ticks: {
            // 数値を「1,000万円」形式で表示
            callback: function (value) {
              return value.toLocaleString() + '万円';
            }
          }
        }
      }
    }
  });
}

{
  "label": "製品別月次売上推移（2025年）",
  "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
  "datasets": [
    {
      "label": "製品A",
      "data": [3200, 2800, 3600, 4100, 4500, 3900, 3700, 4200, 5100, 5600, 6100, 6800]
    },
    {
      "label": "製品B",
      "data": [2100, 2400, 2200, 2700, 3100, 3400, 3200, 2900, 3300, 3600, 3800, 4100]
    },
    {
      "label": "製品C",
      "data": [800, 900, 1100, 1000, 1200, 1400, 1600, 1800, 1700, 2100, 2300, 2500]
    }
  ]
}

AI用プロンプト

以下のプロンプトをコピーしてAIに渡すと、同様のコンポーネントを生成できます。

ChatGPTやClaudeにこのプロンプトを渡すと、同様のコンポーネントをゼロから生成・カスタマイズできます。系列数・色・データ変更など、要件を追記して使うのがおすすめです。

※ このプロンプトを使ってもデモとまったく同じ動作にならない場合があります。AIの解釈や生成タイミングによって差が出ることをご了承ください。

💡 jQuery・Vue・React など特定のライブラリで実装したい場合は、プロンプトの末尾に「〇〇を使って実装してください」と追記してください。

# 折れ線グラフ・複数系列（Chart.js v4）作成依頼

## 概要
Chart.js v4（CDN）と JSON fetch を使った複数系列の折れ線グラフを実装してください。
外部の data.json からデータを読み込んでグラフを描画します。

## 要件
- Chart.js v4 の UMD ビルドを CDN から読み込む
- data.json を fetch で取得してグラフを描画する
- グラフの種類は折れ線（type: 'line'）、3系列
- 系列ごとに異なる色（borderColor）を設定する
- 折れ線をなめらかにする（tension: 0.3）
- エリア塗りつぶしなし（fill: false）
- データポイントに丸印を表示する（pointRadius: 4）
- グラフタイトルをグラフ内に表示する
- 凡例（legend）を表示する
- Y軸の数値をカンマ区切り＋単位付きで表示する
- レスポンシブ対応（responsive: true）
- canvas の親要素の高さを CSS で指定し maintainAspectRatio: false で制御する

## 技術仕様
- HTML / CSS / バニラJavaScript で実装
- 外部ライブラリ：Chart.js v4（https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js）
- レスポンシブ対応：必要

## データ形式（data.json）
{
  "label": "グラフタイトル",
  "labels": ["1月", "2月", ...],
  "datasets": [
    { "label": "系列A", "data": [数値, 数値, ...] },
    { "label": "系列B", "data": [数値, 数値, ...] },
    { "label": "系列C", "data": [数値, 数値, ...] }
  ]
}

## 出力形式
HTML・CSS・JavaScriptを分けて出力してください。
各ファイルは単独でコピー&ペーストして使えるよう記述してください。