• Top
  • システム開発
  • 【コーディング屋のネタ帳】データ可視化はこれで決まり！折れ線グラフ作成に役立つJavaScriptライブラリ5選
システム開発
投稿日：

【コーディング屋のネタ帳】データ可視化はこれで決まり！折れ線グラフ作成に役立つJavaScriptライブラリ5選

データをわかりやすく伝える手段として、グラフはとても便利ですよね。本シリーズでは、Webサイトでよく使われるグラフの種類と、それを簡単に表示できるJavaScriptライブラリを紹介しています。

これまでに、割合を示すのに適した円グラフ、項目ごとの数値を比較しやすい棒グラフについて解説してきました。

そして3回目となる今回は、折れ線グラフ。折れ線グラフは、売上やアクセス数の変化、気温の推移など、時間の経過とともに変化するデータを表現するのに最適です。本記事では、折れ線グラフの特徴や活用シーンを紹介し、Web上で簡単にグラフを作成できるJavaScriptライブラリを解説していきます。

この記事は、次のような人に向けて書いています。

  • Webサイトにグラフを取り入れたい新人エンジニア
  • 今使っているライブラリを別のものに変えようと考えている中級エンジニア
  • デザインにこだわったグラフを探しているWebデザイナー

「どのライブラリを使えばいいの？」 という疑問を解決できるよう、それぞれの特長を比較しながら説明するので、ぜひ参考にしてください！

折れ線グラフとは？

折れ線グラフは、データの変化を線でつなげて表現するグラフの一種です。時間の経過による数値の推移や、異なるカテゴリにおけるデータの変動を視覚的に捉えるのに適しています。

折れ線グラフが向いている活用例

折れ線グラフが活躍するのは、こんな場合です：

  • 時系列データの可視化
    例：売上やアクセス数の推移、気温の変動、株価の変動など。
  • トレンド分析
    例：年間の売上成長率、ウェブサイトの訪問者数の増加傾向。
  • 比較対象の推移を示す
    例：複数の商品の売上推移、異なる都市の気温変化。

折れ線グラフの種類

折れ線グラフには、用途に応じたさまざまなバリエーションがあります。

  • シンプルな折れ線グラフ：基本的な折れ線グラフで、データの推移をシンプルに表現。
  • 積み上げ折れ線グラフ：複数のデータを積み上げて、全体の変化を可視化。
  • スムーズな曲線折れ線グラフ：滑らかな曲線を用いることで、データの流れをより視覚的に表現。
  • エリアチャート（面グラフ）：折れ線グラフの下部を塗りつぶすことで、データの分量感を強調。

折れ線グラフのメリットとデメリット

メリット

  • データの推移を明確に表現できる：時間の経過に伴う変化を直感的に理解しやすい。
  • 複数のデータセットを比較しやすい：複数の線を使用することで異なるデータの動向を比較可能。
  • 細かい変動も把握できる：データポイントが多い場合でも、折れ線をたどることで変動の流れを追いやすい。

デメリット

  • データポイントが少ないと適切に表現できない：
    折れ線グラフはデータの連続性を示すのに適しているが、データポイントが少ないと変化の流れが不明瞭になり、折れ線グラフの強みを活かせないことがある。
  • 値の差が大きすぎると、細かい変動が見えにくくなる：
    例えば、1つのデータが1000、他のデータが5や10のように極端な値が混ざると、スケールの関係で細かい変動が見えにくくなる。
  • データの密度が高すぎると可読性が低下する：
    多くのデータポイントをプロットすると、線が密集しすぎてしまい、視認性が悪くなることがある。この場合、スムーズな線を使ったり、ズーム機能を導入することで解決できるが、調整が必要になる。

JavaScriptライブラリを選ぶ際のチェックポイント

グラフをWebサイトに表示するためのライブラリは数多くありますが、選び方を間違えると使いづらかったり、目的に合わなかったりすることがあります。ライブラリ選定の際には下記6つのポイントをチェックすることをおすすめします。

  1. 導入のしやすさ
    初心者でもすぐに使えるかどうかは重要です。CDNを使って簡単に読み込めるものや、設定が少なくても動作するライブラリを選ぶとよいでしょう。
  2. カスタマイズ性
    デザインや色、アニメーションなどを柔軟に変更できるかを確認しましょう。ブランドやデザインテーマに合わせた調整が必要な場合は、カスタマイズ性の高いものがおすすめです。
  3. レスポンシブ対応
    スマホやタブレットなど、画面サイズが異なるデバイスでもきれいに表示されるかをチェックしましょう。特に、ビジネスサイトではモバイル対応が重要です。
  4. パフォーマンス
    表現するグラフにもよりますが、大規模データを扱う場合、表示速度やパフォーマンスも気にする必要があります。特にリアルタイムデータを表示する用途では、軽量で高速なライブラリが求められます。
  5. サポートとドキュメント
    公式サイトやGitHubでのサポート状況や、ドキュメントの充実度を確認しましょう。使い方がわからないときに参考になる情報があるかどうかは重要です。
  6. ライセンスと利用料
    利用規約やライセンス形態も確認しておきましょう。商用利用が可能かどうか、無料で使えるか、有料プランが必要かなどを事前にチェックすることが大切です。

おすすめライブラリ紹介

1 Chart.js

  • 公式URL: https://www.chartjs.org/
  • 特徴: シンプルなAPIと豊富なカスタマイズオプションがあり、初心者にも扱いやすい。軽量ながらもアニメーションやツールチップのカスタマイズが可能で、基本的な折れ線グラフから複雑なデータ可視化まで対応可能。
  • メリット
    ・レスポンシブ対応が標準。
    ・簡単にアニメーションを追加可能。
    ・軽量で、簡単に導入できる。
  • デメリット
    ・大規模データの処理には向いていない。
    ・高度なカスタマイズには追加のプラグインが必要。
    ・複雑なインタラクティブ機能には向いていない。

2 D3.js

  • 公式URL: https://d3js.org/
  • 特徴: データ可視化のための強力なツールで、柔軟なカスタマイズが可能。データドリブンな描画が可能で、SVGやCanvasを自由に操り、インタラクティブなデータ表現が実現できる。企業のダッシュボードやデータ分析ツールに多く使用される。
  • メリット
    ・大規模データの可視化に適している。
    ・高度なカスタマイズが可能。
    ・インタラクティブなグラフが作成できる。
    ・リアルタイムデータをグラフに反映できる。
  • デメリット
    ・初心者には学習コストが高い。
    ・シンプルなグラフを作成するにはオーバースペック。
    ・レスポンシブ対応は可能だが、手動での実装が必要。

3 ApexCharts

  • 公式URL: https://apexcharts.com/
  • 特徴: モダンなデザインのグラフを簡単に作成でき、リアルタイムデータ対応。直感的なAPI設計で、高度なカスタマイズが可能。ズーム、パン、アニメーション、ツールチップの制御など、視覚的に洗練されたグラフを作成できる。
  • メリット
    ・直感的なAPI設計で導入しやすい。
    ・大規模データの処理に適している。
    ・標準でレスポンシブ対応しており、スマホ・タブレットでも適切に表示される。
    ・リアルタイムデータに対応。
    ・インタラクティブなグラフが作成可能。
  • デメリット
    ・D3.jsほどの自由度はない。

4 Google Charts

  • 公式URL: https://developers.google.com/chart/
  • 特徴: Googleが提供するクラウドベースのグラフ描画ツール。Googleスプレッドシートやデータベースと統合し、リアルタイムデータの取得が容易。グラフの種類が豊富で、Webアプリケーションに簡単に組み込むことが可能
  • メリット
    ・APIとの連携が簡単（Googleスプレッドシートやデータベースと直接接続可能で、リアルタイムデータの取得が容易）。
    ・クラウドベースで手軽に使用可能。
    ・完全無料で利用可能。
  • デメリット
    ・デザインの自由度が低い。
    ・インタラクティブ性は他のライブラリと比べて制限がある。
    ・オフラインでは使用できない（インターネット接続が必要）。

5 Chartist.js

  • 公式URL: https://gionkunz.github.io/chartist-js/
  • 特徴: 軽量でモバイルフレンドリーなグラフライブラリ。CSSを活用したカスタマイズが可能で、レスポンシブデザインにも対応。シンプルなコードで扱いやすく、フロントエンド開発者にとっても扱いやすい。
  • メリット
    ・軽量で高速。
    ・CSSを使用したカスタマイズが可能。
    ・フロントエンド開発者にとって扱いやすい。
    ・モバイル対応がしやすい。
  • デメリット
    ・機能がシンプルで高度なカスタマイズが難しい。
    ・大規模データの処理には向いていない。
    ・リアルタイムデータの更新には手動での実装が必要。
    ・高度なJavaScriptカスタマイズには制限がある。

ライブラリ比較表

前述のライブラリ選定ポイントをまとめた表は下記のとおり

名称導入のしやすさカスタマイズ性レスポンシブ対応パフォーマンスサポートとドキュメントライセンス
Chart.js高い中程度標準対応軽量・高速公式ドキュメント充実MITライセンス
D3.js中程度非常に高い手動対応大規模データ対応可能豊富なサンプルと解説BSDライセンス
ApexCharts高い高い標準対応高速・リアルタイム対応公式ドキュメント豊富MITライセンス
Google Charts高い中程度手動対応高速Googleの公式サポート無料
Chartist.js高い中程度標準対応軽量・高速コミュニティベースMITライセンス

サンプルデータを使った導入例

今回紹介した各ライブラリを使って、同じ条件のサンプルデータから折れ線グラフを表示する手順を作成してみました。それぞれの特徴を活かしたオプションもつけてみたので参考にしてくださいね。

サンプルデータ：月次売上・費用・利益一覧表

年月売上費用利益
2024-01120,00050,00070,000
2024-02140,00070,00070,000
2024-03130,00060,00070,000
2024-04150,00070,00080,000
2024-05160,00070,00090,000
2024-06170,00090,00080,000
2024-07200,000110,00090,000
2024-08180,00090,00090,000
2024-09220,000120,000100,000
2024-10210,000110,000100,000
2024-11230,000130,000100,000
2024-12240,000130,000110,000

今回は、このデータを下記のような、共通のJSONデータとして扱っていきます。
（そのため、各ライブラリのコード部ではデータの記述は割愛しています）


const monthlyData = [
  { month: "2024-01", revenue: 120000, expense: 50000, profit: 70000 },
  { month: "2024-02", revenue: 140000, expense: 70000, profit: 70000 },
  { month: "2024-03", revenue: 130000, expense: 60000, profit: 70000 },
  { month: "2024-04", revenue: 150000, expense: 70000, profit: 80000 },
  { month: "2024-05", revenue: 160000, expense: 70000, profit: 90000 },
  { month: "2024-06", revenue: 170000, expense: 90000, profit: 80000 },
  { month: "2024-07", revenue: 200000, expense: 110000, profit: 90000 },
  { month: "2024-08", revenue: 180000, expense: 90000, profit: 90000 },
  { month: "2024-09", revenue: 220000, expense: 120000, profit: 100000 },
  { month: "2024-10", revenue: 210000, expense: 110000, profit: 100000 },
  { month: "2024-11", revenue: 230000, expense: 130000, profit: 100000 },
  { month: "2024-12", revenue: 240000, expense: 130000, profit: 110000 }
];

Chart.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
2.HTMLとJavaScriptコード

 <h1>2024年1月～12月 月次売上・費用・利益グラフ</h1>
  <canvas id="myChart" width="800" height="400"></canvas>

  <script>

    // Chart.js 用にグラフのラベル配列と、各系列のデータ配列を準備
    const labels = monthlyData.map(item => item.month);
    const revenueData = monthlyData.map(item => item.revenue);
    const expenseData = monthlyData.map(item => item.expense);
    const profitData  = monthlyData.map(item => item.profit);

    // Chart.js の設定オプション
    const ctx = document.getElementById('myChart');

    const chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [
          {
            label: 'Revenue (売上)',
            data: revenueData,
            borderColor: 'rgba(54, 162, 235, 1)', // ライン色
            backgroundColor: 'rgba(54, 162, 235, 0.2)', // ポイントの塗りつぶし色
            tension: 0.3,          // 線のなめらかさ(0～1)
            pointStyle: 'circle',  // ポイントの形状
            pointRadius: 5,        // ポイントの大きさ
            fill: false            // 線の下を塗りつぶさない
          },
          {
            label: 'Expense (費用)',
            data: expenseData,
            borderColor: 'rgba(255, 99, 132, 1)',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            tension: 0.3,
            pointStyle: 'rect',
            pointRadius: 5,
            fill: false
          },
          {
            label: 'Profit (利益)',
            data: profitData,
            borderColor: 'rgba(75, 192, 192, 1)',
            backgroundColor: 'rgba(75, 192, 192, 0.2)',
            tension: 0.3,
            pointStyle: 'triangle',
            pointRadius: 6,
            fill: false
          }
        ]
      },
      options: {
        responsive: true,
        // 補助情報（タイトル、サブタイトル等）の表示
        plugins: {
          title: {
            display: true,
            text: '2024年 月次売上・費用・利益の推移',
            font: {
              size: 18
            }
          },
          subtitle: {
            display: true,
            text: '（Chart.jsの機能を活用した折れ線グラフのサンプル）',
            font: {
              size: 14
            }
          },
          tooltip: {
            enabled: true,
            mode: 'index',           // ホバー時に同じX軸上のすべてのデータを表示
            intersect: false,
            callbacks: {
              label: function(context) {
                // Y軸の値をフォーマット（カンマ区切りなど）
                const value = context.parsed.y.toLocaleString();
                return `${context.dataset.label}: ${value} 円`;
              }
            }
          },
          legend: {
            display: true,
            labels: {
              font: {
                size: 12
              }
            }
          }
        },
        scales: {
          x: {
            display: true,
            title: {
              display: true,
              text: '月',
              font: {
                size: 14
              }
            }
          },
          y: {
            beginAtZero: true,
            title: {
              display: true,
              text: '金額（円）',
              font: {
                size: 14
              }
            },
            ticks: {
              // Y軸もフォーマット
              callback: function(value) {
                return value.toLocaleString() + ' 円';
              }
            }
          }
        },
        interaction: {
          // グラフ上にマウスカーソルを重ねたときの補助線を表示する設定
          mode: 'index',
          intersect: false
        }
      }
    });
  </script>

解説・ポイント

  1. 複数系列を簡単に描画
    • datasets 配列の要素を増やせば、複数の折れ線を同じグラフで表示できます。
    • 「売上」「費用」「利益」といった複数の指標を一度に可視化するのがとても簡単です。
  2. グラフのタイトル・サブタイトル
    • plugins.title と plugins.subtitle を活用し、グラフ全体の説明を付加できます。
  3. ツールチップのカスタマイズ
    • callbacks.label で値（ツールチップに表示される値）を自由にフォーマットできます。
    • toLocaleString() を使ってカンマ区切りにするなど、売上などの大きな金額を読みやすくしました。
  4. スムージング (tension) とポイントスタイル
    • tension プロパティを設定することで折れ線を曲線にできます。
    • pointStyle や pointRadius によって、データ点の形と大きさをカスタマイズ可能です。
  5. レスポンシブ対応
    • デフォルトで responsive: true となっているため、ウィンドウサイズに応じてキャンバスがリサイズされます。
  6. さまざまなチャートタイプに切り替えやすい
    • type: 'bar' に変更して棒グラフにするなど、他の可視化方法への切り替えも容易です。

D3.js

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)


<script src="https://d3js.org/d3.v7.min.js"></script>
2.CSSを追加

  <style>
    body {
      font-family: sans-serif;
    }
    .axis path,
    .axis line {
      fill: none;
      stroke: #ccc;
      shape-rendering: crispEdges;
    }
    .legend {
      font-size: 12px;
    }
    .tooltip {
      position: absolute;
      text-align: center;
      padding: 4px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      border-radius: 4px;
      pointer-events: none;
      font-size: 12px;
    }
  </style>
3.HTMLとJavaScriptコード

<h1>2024年1月～12月 月次売上・費用・利益グラフ (D3.js)</h1>
<div id="chart"></div>
<div id="tooltip" class="tooltip" style="opacity: 0;"></div>

<script>
// SVGコンテナの設定
const margin = { top: 40, right: 100, bottom: 40, left: 60 },
      width  = 800 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

// SVG 要素を追加
const svg = d3.select("#chart")
  .append("svg")
    .attr("width",  width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", `translate(${margin.left},${margin.top})`);

// X軸スケール（カテゴリ：月）
const xScale = d3.scaleBand()
  .domain(monthlyData.map(d => d.month))
  .range([0, width])
  .padding(0.1);

// Y軸スケール（3指標の最大値に合わせて可変）
const yMax = d3.max(monthlyData, d => Math.max(d.revenue, d.expense, d.profit));
const yScale = d3.scaleLinear()
  .domain([0, yMax])
  .range([height, 0])
  .nice(); // 目盛りを端数の無い値に調整

// 軸の描画
//    X軸
svg.append("g")
   .attr("transform", `translate(0, ${height})`)
   .attr("class", "axis")
   .call(d3.axisBottom(xScale));

//    Y軸
svg.append("g")
   .attr("class", "axis")
   .call(d3.axisLeft(yScale)
         .tickFormat(d3.format(","))  // カンマ区切り表示
         .ticks(8));                  // 目盛りの数を適度に

// ラインジェネレータ (売上・費用・利益) を3つ用意
//    .curve(d3.curveCatmullRom.alpha(0.5)) で曲線の「テンション」を設定
const lineRevenue = d3.line()
  .x(d => xScale(d.month) + xScale.bandwidth() / 2)
  .y(d => yScale(d.revenue))
  .curve(d3.curveCatmullRom.alpha(0.5));

const lineExpense = d3.line()
  .x(d => xScale(d.month) + xScale.bandwidth() / 2)
  .y(d => yScale(d.expense))
  .curve(d3.curveCatmullRom.alpha(0.5));

const lineProfit = d3.line()
  .x(d => xScale(d.month) + xScale.bandwidth() / 2)
  .y(d => yScale(d.profit))
  .curve(d3.curveCatmullRom.alpha(0.5));

// トランジション付きで折れ線を描画する関数を定義
function drawLineWithTransition(data, lineGenerator, color, className) {
  // path要素を追加
  const path = svg.append("path")
    .datum(data)
    .attr("class", className)
    .attr("fill", "none")
    .attr("stroke", color)
    .attr("stroke-width", 2)
    .attr("d", lineGenerator);

  // アニメーション用: パスの全長を取得
  const totalLength = path.node().getTotalLength();

  // stroke-dash系の設定を使い、「線が描かれていく」アニメーションを実装
  path
    .attr("stroke-dasharray", `${totalLength} ${totalLength}`)
    .attr("stroke-dashoffset", totalLength)
    .transition()
    .duration(2000)          // 2秒かけて描画
    .ease(d3.easeLinear)     // 線形変化
    .attr("stroke-dashoffset", 0);
}

// 3系列（売上・費用・利益）の折れ線をアニメーション付きで描画
drawLineWithTransition(monthlyData, lineRevenue, "steelblue", "line-revenue");
drawLineWithTransition(monthlyData, lineExpense, "tomato",    "line-expense");
drawLineWithTransition(monthlyData, lineProfit,  "green",     "line-profit");

// 各データ点にマーカー(circle)とツールチップを付与
function drawPoints(key, color) {
  svg.selectAll(`.point-${key}`)
    .data(monthlyData)
    .enter()
    .append("circle")
      .attr("class", `point-${key}`)
      .attr("cx", d => xScale(d.month) + xScale.bandwidth() / 2)
      .attr("cy", d => yScale(d[key]))
      .attr("r", 4)
      .attr("fill", color)
      .on("mouseover", (event, d) => {
        // ツールチップを表示
        d3.select("#tooltip")
          .style("opacity", 1)
          .html(
            `<strong>${d.month}</strong><br>
             ${key}: ${d[key].toLocaleString()} 円`
          )
          .style("left", (event.pageX + 10) + "px")
          .style("top",  (event.pageY - 20) + "px");
      })
      .on("mousemove", (event) => {
        // マウス移動に追従
        d3.select("#tooltip")
          .style("left", (event.pageX + 10) + "px")
          .style("top",  (event.pageY - 20) + "px");
      })
      .on("mouseout", () => {
        // ツールチップを非表示
        d3.select("#tooltip")
          .style("opacity", 0);
      });
}

// 売上・費用・利益、3つの系列で描画
drawPoints("revenue", "steelblue");
drawPoints("expense", "tomato");
drawPoints("profit",  "green");

// 凡例の追加（右上付近に配置する例）
const legends = [
  { name: "Revenue (売上)", color: "steelblue" },
  { name: "Expense (費用)", color: "tomato"   },
  { name: "Profit (利益)",  color: "green"    },
];

svg.selectAll(".legend")
   .data(legends)
   .enter()
   .append("g")
     .attr("class", "legend")
     .attr("transform", (d, i) => `translate(${width + 10}, ${i * 20})`)
   .call(g => {
     // カラーの矩形
     g.append("rect")
      .attr("x", 0)
      .attr("y", -5)
      .attr("width", 10)
      .attr("height", 10)
      .attr("fill", d => d.color);

     // テキスト
     g.append("text")
      .attr("x", 15)
      .attr("y", 0)
      .attr("dy", ".35em")
      .style("font-size", "12px")
      .text(d => d.name);
   });

</script>

解説・ポイント

  1. 曲線のテンション (curveCatmullRom.alpha(0.5))
    • D3.jsでは、複数のカーブ補完関数から好みのスタイルを選べます。
    • curveCatmullRom は滑らかな曲線、.alpha(0.5) で「曲線の張り具合」を調整しています。大きいほど曲線が“たわむ”ような形になります。
  2. 描画時のアニメーション（transition）
    • SVGのpath要素に対し、stroke-dasharray と stroke-dashoffset を使って「線が左から右へ伸びていく」演出を実装。
    • .transition().duration(2000).ease(d3.easeLinear) で、2秒かけて一定速度でアニメーションさせています。
    • getTotalLength() で実際のパスの長さを取得し、dasharray と dashoffset を同期するのがポイントです。
  3. ツールチップ (mouseover, mousemove, mouseout)
    • on("mouseover", ...) で透明度を変更して表示し、HTML内部でカスタマイズした内容を表示できます。
    • event.pageX と event.pageY を使うことで、マウスカーソルに追従するツールチップを実現しています。
  4. 凡例の手動追加
    • tension プロパティを設定することで折れ線を曲線にできます。
    • pointStyle や pointRadius によって、データ点の形と大きさをカスタマイズ可能です。
  5. レスポンシブ対応
    • デフォルトで responsive: true となっているため、ウィンドウサイズに応じてキャンバスがリサイズされます。
  6. さまざまなチャートタイプに切り替えやすい
    • type: 'bar' に変更して棒グラフにするなど、他の可視化方法への切り替えも容易です。

ApexCharts

上記２つのグラフに加えて、グラデーションも追加したコードです。

導入手順

1.CDNリンクの追加


<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
2.HTMLとJavaScriptコード

<h1>2024年1月～12月 月次売上・費用・利益グラフ (ApexCharts)</h1>
<div id="chart"></div>

<script>
// ApexCharts用に「x軸カテゴリ配列」と「各系列のデータ配列」を生成
const categories  = monthlyData.map(d => d.month);
const revenueData = monthlyData.map(d => d.revenue);
const expenseData = monthlyData.map(d => d.expense);
const profitData  = monthlyData.map(d => d.profit);

// ApexCharts のオプション
// 複数系列(売上/費用/利益)をまとめてラインチャートにする
const options = {
  chart: {
    type: 'line',
    height: 450,
    toolbar: {
      show: true // ズーム・パン・ダウンロードボタンなどが表示される
    }
  },
  // データ系列を定義
  series: [
    { name: '　売上', data: revenueData },
    { name: '　費用', data: expenseData },
    { name: '　利益',  data: profitData  }
  ],
  // X軸設定
  xaxis: {
    categories: categories,
    title: {
      text: '月'
    }
  },
  // Y軸設定
  yaxis: {
    title: {
      text: '金額（円）'
    },
    labels: {
      formatter: (val) => val.toLocaleString()
    }
  },
  // その他のオプション
  stroke: {
    curve: 'smooth', // 線をなめらかに
    width: 3         // 線の太さ
  },
  markers: {
    size: 4          // データ点の大きさ
  },
  
  tooltip: {
    y: {
      formatter: (val) => `${val.toLocaleString()} 円`
    }
  },
  title: {
    text: '2024年 月次売上・費用・利益',
    align: 'left'
  },
  subtitle: {
    text: 'ApexChartsでの折れ線グラフサンプル',
    align: 'left'
  },
  legend: {
    position: 'top',
    horizontalAlign: 'left'
  }
};

// グラフを描画
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>

解説・ポイント

  1. 複数系列の線グラフが簡単に実装できる
    • series プロパティに複数オブジェクトを渡すだけで、売上・費用・利益などの複数指標を同時に表示できます。
  2. 豊富なツールバー機能
    • chart.toolbar オプションで、グラフのダウンロード（PNG/JPG/SVG）, ズーム（選択/拡大/縮小/パン）, リセット などのインタラクティブ操作をワンクリックで使えます。
  3. なめらかな曲線とカスタマイズ性
    • stroke.curve: 'smooth' でラインを曲線に、width で太さを変更できます。
    • ApexChartsには他にも 'straight' や 'stepline' など、多様なスタイルが選択可能です。
  4. ツールチップのフォーマット
    • tooltip.y.formatter を使うと、値をカンマ区切りにしたり、後ろに '円' を付けるなど、フォーマットを自由に変更できます。
  5. データラベルや軸ラベルの制御
    • xaxis, yaxis の title, labels, formatter を用いて、軸周りの表現を柔軟にカスタマイズできます。
  6. レスポンシブ・アニメーション
    • デフォルトでチャートはレスポンシブに描画され、ウィンドウの幅に合わせてリサイズされます。
    • シンプルながら、描画時のアニメーションも組み込みで有効になっています。

Google Charts

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
2.JavaScriptを追加

<script>
    // Google Chartsのロード
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // データをGoogle Charts用の2次元配列に変換
      const dataArray = [['Month', 'Revenue (売上)', 'Expense (費用)', 'Profit (利益)']];
      monthlyData.forEach(d => {
        dataArray.push([d.month, d.revenue, d.expense, d.profit]);
      });

      // データを作成
      const data = google.visualization.arrayToDataTable(dataArray);

      // グラフのオプション（プロットポイントを表示する設定を追加）
      const options = {
        title: '2024年 月次売上・費用・利益',
        subtitle: 'Google Chartsを使った折れ線グラフ',
        curveType: 'function', // 曲線を滑らかに
        legend: { position: 'top' },
        chartArea: { width: '80%', height: '70%' },
        hAxis: {
          title: '月'
        },
        vAxis: {
          title: '金額（円）',
          format: 'short'
        },
        colors: ['#1E88E5', '#D32F2F', '#388E3C'],
        pointSize: 6, // ★データポイントのサイズを指定（ここが追加点）
        lineWidth: 3  // 線の太さ
      };

      // チャートを描画
      const chart = new google.visualization.LineChart(document.getElementById('chart'));
      chart.draw(data, options);
    }
  </script>
3.HTML

<div id="chart" style="width: 900px; height: 500px;"></div>

解説・ポイント

  1. 曲線の補完がデフォルトで可能
    • curveType: 'function' を設定すると、スムーズな曲線（spline曲線） が適用され、より直感的なグラフになります。
  2. 軽量かつ高速
    • 他のライブラリ（Chart.jsやD3.js）と比べても、Google Chartsはレンダリング速度が速いため、データが多くなってもパフォーマンスが良好です。
  3. シンプルなカスタマイズ
    • colors: ['#1E88E5', '#D32F2F', '#388E3C'] で各系列の色を簡単に指定可能。
    • chartArea の調整で凡例やタイトルとの間隔を最適化できる。
  4. ブラウザとの互換性が高い
    • Google ChartsはSVGとHTML5ベースなので、ほとんどのブラウザでネイティブに動作する。

Chartist.js

Chartist.jsでは、少なくとも簡単には要素の色は指定できないようでした。

導入手順

1.CDNリンクの追加 (HTMLの<head>内に記述)

  <!-- ChartistのCSSとJavaScriptの読み込み -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.css">
  <script src="https://cdn.jsdelivr.net/npm/chartist/dist/chartist.min.js"></script>
2.CSSの設定

 <style>
    /* Chartist グラフのスタイル */
    .ct-chart {
      height: 400px;
    }

    /* 各系列の折れ線とデータポイントのスタイル */
    .ct-series-a .ct-line,
    .ct-series-a .ct-point {
      stroke: #1E88E5;
    }
    .ct-series-b .ct-line,
    .ct-series-b .ct-point {
      stroke: #D32F2F;
    }
    .ct-series-c .ct-line,
    .ct-series-c .ct-point {
      stroke: #388E3C;
    }

    /* データポイントのスタイル */
    .ct-point {
      stroke-width: 10px; /* データポイントのサイズ */
    }

    /* 凡例のカスタマイズ */
    .legend {
      display: flex;
      justify-content: center;
      margin-top: 10px;
    }
    .legend div {
      display: flex;
      align-items: center;
      margin-right: 15px;
      font-size: 14px;
    }
    .legend span {
      width: 12px;
      height: 12px;
      display: inline-block;
      margin-right: 5px;
    }
  </style>
2.HTMLとJavaScriptを追加

<h1>2024年1月～12月 月次売上・費用・利益グラフ (Chartist.js)</h1>
<div class="ct-chart"></div>
<div class="legend">
  <div><span style="background: #1E88E5;"></span> Revenue (売上)</div>
  <div><span style="background: #D32F2F;"></span> Expense (費用)</div>
  <div><span style="background: #388E3C;"></span> Profit (利益)</div>
</div>

<script>

const labels = monthlyData.map(d => d.month); // X軸のラベル
const revenueData = monthlyData.map(d => d.revenue);
const expenseData = monthlyData.map(d => d.expense);
const profitData  = monthlyData.map(d => d.profit);

// Chartist.js に渡すデータオブジェクト
const data = {
  labels: labels,
  series: [revenueData, expenseData, profitData]
};

// Chartist.js のオプション設定
const options = {
  fullWidth: true,
  chartPadding: { right: 40 },
  showPoint: true, // データポイント（プロットポイント）を表示
  lineSmooth: Chartist.Interpolation.cardinal({ tension: 0.5 }), // 曲線の滑らかさを設定
  axisY: {
    labelInterpolationFnc: function(value) {
      return value.toLocaleString(); // カンマ区切り
    }
  }
};

// グラフを描画
new Chartist.Line('.ct-chart', data, options);



</script>

解説・ポイント

  1. showPoint: true でデータポイントを明示的に表示
  2. lineSmooth で曲線の滑らかさを調整
  3. レスポンシブデザイン対応（自動リサイズ）

まとめ

この記事では、折れ線グラフの基本から利用シーン、ライブラリの選び方、そしておすすめライブラリの特徴と比較表までを紹介しました。

折れ線グラフは、データの視覚化において非常に有用なツールです。今回紹介したライブラリを活用し、プロジェクトのニーズに合った最適なグラフを選んでくださいね。

この記事を見た人がよく見ている記事

SEO