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

最近、データのビジュアル化が注目されており、Webサイトでもさまざまな形式のグラフが使われるようになりました。たとえば、会社の予算配分をわかりやすく示したり、製品の市場シェアを視覚的に伝えたりする場面でよく利用されています。こうしたグラフは、データの割合や構成を簡単に把握できる点で、多くの人にとって便利なツールとなっています。

今回のテーマは「円グラフ」。前回の記事で紹介した棒グラフとは異なり、全体に対する各データの割合を直感的に示すのに適した円グラフにフォーカスし、その特徴や活用方法、さらに円グラフを簡単に作成できるJavaScriptライブラリについてご紹介します。

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

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

このシリーズでは、グラフライブラリの特徴や使い方をサンプルコード付きでわかりやすく紹介していくので、ぜひ参考にしてください！

円グラフとは？

円グラフは、データを円の形に分けて表現するグラフです。それぞれのセグメントが全体に対する割合を示していて、パッと見ただけでどの部分がどれくらいの大きさかがわかります。たとえば、ケーキをいくつかのサイズに切り分けたようなイメージですね。

棒グラフが向いている活用例

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

割合や比率を見せたいとき：全体に対してどのくらいの割合かを視覚的に示すのにピッタリです。例: 市場シェア、予算の内訳、アンケート結果
データが少ないとき：データの項目が多すぎない場合に最適です（5–6個くらいまでが理想）。
例: 部門別売上構成、ユーザー層の割合。
ざっくり全体感を伝えたいとき：データ全体を一目で理解してほしい場合に便利です。

円グラフの種類

円グラフにもいくつかバリエーションがあります。

スタンダードな円グラフ：円をいくつかのセグメントに分ける一般的なタイプ。
ドーナツグラフ：真ん中が空いているタイプで、複数の円を重ねて表現することもできます。
半円グラフ：円の半分だけを使って、スペースを節約しつつ情報を伝えます。

円グラフのメリットとデメリット

メリット

割合を強調しやすく、視覚的にわかりやすい。
見た目が直感的で、データの全体像が一目でわかります。
シンプルなデザインなので、インフォグラフィックやプレゼン資料にも最適です。

デメリット

項目が多すぎるとき：セグメントが多くなると、ごちゃごちゃして見づらくなります。
正確な比較が必要なとき：細かい数値の差を伝えたい場合は、棒グラフや折れ線グラフの方が適しています。
負の値やゼロを含むデータ：円グラフは正の割合を示すのが基本なので、負の値やゼロには向いていません。
過剰な装飾：3D効果や派手な色使いなどを加えすぎると、各部分の大きさが視覚的に歪んで見えたり、情報の正確性が損なわれたりすることがあります。

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

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

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

ライブラリ比較表

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

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

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

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

サンプルデータ：企業の部門ごとの収益割合

部門	収益割合（%）
営業	40
マーケティング	25
研究開発	15
運営	10
カスタマーサポート	10

Chart.js

導入手順

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


<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2.HTMLとJavaScriptコード


 <canvas id="myPieChart" width="400" height="400"></canvas>

<script>
      const ctx = document.getElementById('myPieChart');
      const data = {
          labels: ['営業', 'マーケティング', '研究開発', '運営', 'カスタマーサポート'],
          datasets: [{
              label: '収益割合（%）',
              data: [40, 25, 15, 10, 10],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.6)',
                  'rgba(54, 162, 235, 0.6)',
                  'rgba(255, 206, 86, 0.6)',
                  'rgba(75, 192, 192, 0.6)',
                  'rgba(153, 102, 255, 0.6)'
              ],
              borderColor: [
                  'rgba(255, 99, 132, 1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)'
              ],
              borderWidth: 1,
              hoverOffset: 30 // ホバー時の拡大サイズ
          }]
      };
      
    
      new Chart(ctx, {
          type: 'pie',
          data: data,
          options: {
                animation: {
                    animateScale: true, // スケールのアニメーションを有効化
                }
            }
      });
  </script>

D3.js

Chrat.jsと同じような機能を搭載させようとすると、D3.jsではコードが長くなります。

導入手順

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


<script src="https://d3js.org/d3.v7.min.js"></script>

2.CSSを追加


<style>
    .tooltip {
        position: absolute;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 12px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
    }
</style>

3.HTMLとJavaScriptコード


 <div id="chart"></div>
<div class="tooltip" id="tooltip"></div>
<script>
    const data = [40, 25, 15, 10, 10];
    const labels = ['営業', 'マーケティング', '研究開発', '運営', 'カスタマーサポート'];
    const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];

    const width = 400, height = 400, radius = Math.min(width, height) / 2;

    const svg = d3.select('#chart')
        .append('svg')
        .attr('width', width)
        .attr('height', height)
        .append('g')
        .attr('transform', `translate(${width / 2}, ${height / 2})`);

    const pie = d3.pie().sort(null);
    const arc = d3.arc().innerRadius(0).outerRadius(radius);

    const pieData = pie(data);

    // ツールチップ要素
    const tooltip = d3.select('#tooltip');

    // セグメントを描画
    const path = svg.selectAll('path')
        .data(pieData)
        .enter()
        .append('path')
        .attr('fill', (d, i) => colors[i])
        .attr('opacity', 0.8)
        .attr('d', d3.arc().innerRadius(0).outerRadius(0)) // 初期状態は半径0
        .each(function (d) { this._current = d; }) // 初期データを保存
        .on('mouseover', function (event, d) {
            d3.select(this).attr('opacity', 1); // セグメントをハイライト
            tooltip
                .style('opacity', 1)
                .html(`<strong>${labels[d.index]}</strong>: ${d.data}%`)
                .style('left', `${event.pageX + 10}px`)
                .style('top', `${event.pageY - 20}px`);
        })
        .on('mousemove', function (event) {
            tooltip
                .style('left', `${event.pageX + 10}px`)
                .style('top', `${event.pageY - 20}px`);
        })
        .on('mouseout', function () {
            d3.select(this).attr('opacity', 0.8); // 元の透明度に戻す
            tooltip.style('opacity', 0);
        });

    // アニメーションでセグメントを拡大
    path.transition()
        .duration(1000) // アニメーションの時間
        .attrTween('d', function (d) {
            const interpolate = d3.interpolate({ startAngle: 0, endAngle: 0 }, d);
            return function (t) {
                return arc(interpolate(t));
            };
        });

    // ラベルを追加
    svg.selectAll('text')
        .data(pieData)
        .enter()
        .append('text')
        .attr('transform', d => `translate(${arc.centroid(d)})`)
        .attr('text-anchor', 'middle')
        .attr('font-size', '12px')
        .attr('opacity', 0) // 初期状態は透明
        .text((d, i) => labels[i])
        .transition()
        .delay(1000) // アニメーションが終了した後にラベルを表示
        .duration(500)
        .attr('opacity', 1);
</script>

ApexCharts

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

導入手順

1.CDNリンクの追加


<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

2.HTMLとJavaScriptコード


<div id="chart"></div>
<script>
    const options = {
        chart: {
            type: 'pie',
            animations: {
                enabled: true,
                easing: 'easeinout',
                speed: 1000
            }
        },
        series: [40, 25, 15, 10, 10],
        labels: ['営業', 'マーケティング', '研究開発', '運営', 'カスタマーサポート'],
        fill: {
            type: 'gradient', // グラデーションを指定
            gradient: {
                shade: 'dark', // グラデーションのスタイル ('light' または 'dark')
                type: 'vertical', // グラデーションの方向 ('vertical', 'horizontal', 'diagonal1', 'diagonal2')
                gradientToColors: ['#FF9A9E', '#ABDCFF', '#FFF7A1', '#96FBCB', '#CBA6FF'], // 各セグメントの終点カラー
                stops: [0, 100] // グラデーションの開始と終了位置
            }
        },
        colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'], // グラデーションの開始カラー
        tooltip: {
            enabled: true,
            theme: 'dark',
            y: {
                formatter: (value) => `${value}%`
            }
        },
        legend: {
            position: 'top',
            horizontalAlign: 'center'
        },
        responsive: [{
            breakpoint: 480,
            options: {
                chart: {
                    width: 300
                },
                legend: {
                    position: 'bottom'
                }
            }
        }]
    };

    const chart = new ApexCharts(document.querySelector('#chart'), options);
    chart.render();
</script>

Google Charts

Google Chartsでは、データをCSVダウンロード可能なグラフを作成してみました

導入手順

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


<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

2.JavaScriptを追加


<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        // データの設定
        const data = google.visualization.arrayToDataTable([
            ['部門', '収益割合'],
            ['営業', 40],
            ['マーケティング', 25],
            ['研究開発', 15],
            ['運営', 10],
            ['カスタマーサポート', 10]
        ]);

        // オプションの設定
        const options = {
            title: '部門ごとの収益割合',
            is3D: true, // 3Dを有効化
            colors: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'], // セグメントの色
            pieSliceTextStyle: {
                color: 'black' // セグメントのテキスト色
            }
        };

        // グラフの描画
        const chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
    }
</script>

3.HTML


<div id="piechart" style="width: 600px; height: 400px;"></div>

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>
    /* グラフのサイズを調整 */
    .ct-chart {
        width: 400px;
        /* 横幅を設定 */
        height: 400px;
        /* 高さを設定 */
        margin: 0 auto;
        /* 中央揃え */
    }

    /* ラベルの色を白に設定 */
    .ct-label {
        fill: white !important;
        /* ラベルの文字色 */
        font-size: 14px;
        /* ラベル文字のサイズ（必要に応じて調整） */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        /* 視認性向上のための影 */
    }
</style>

2.HTMLとJavaScriptを追加


<div class="ct-chart"></div>
<script>
    // データ設定
    const data = {
        labels: ['営業', 'マーケティング', '研究開発', '運営', 'カスタマーサポート'],
        series: [40, 25, 15, 10, 10]
    };

    // オプション設定
    const options = {
        startAngle: 0, // 描画開始位置
        showLabel: true, // ラベルを表示
        donut: true, // ドーナツチャートを有効化
        donutWidth: 160 // ドーナツの太さ
    };

    // グラフ描画
    const chart = new Chartist.Pie('.ct-chart', data, options);

    // アニメーションを追加
    chart.on('draw', function (data) {
        if (data.type === 'slice') {
            // 各セグメントにアニメーションを適用
            const pathLength = data.element._node.getTotalLength();

            data.element.attr({
                'stroke-dasharray': pathLength + 'px ' + pathLength + 'px',
                'stroke-dashoffset': -pathLength + 'px'
            });

            data.element.animate({
                'stroke-dashoffset': {
                    begin: 1000 * data.index, // 遅延時間
                    dur: 1000, // アニメーションの長さ
                    from: -pathLength + 'px',
                    to: '0px',
                    easing: Chartist.Svg.Easing.easeOutQuint
                }
            });
        }
    });
</script>

まとめ

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

円グラフは、データを視覚的に伝える有効な手段ですが、適切な場面で使うことが重要です。この記事で紹介したライブラリを活用して、魅力的でわかりやすいデータビジュアライゼーションを作成してみてください。

次回の記事では、「折れ線グラフ」の特徴とおすすめライブラリについて解説する予定です。お楽しみに！

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

円グラフとは？

棒グラフが向いている活用例

円グラフの種類

円グラフのメリットとデメリット

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

おすすめライブラリ紹介

1 Chart.js

2 D3.js

3 ApexCharts

4 Google Charts

5 Chartist.js

ライブラリ比較表

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

サンプルデータ：企業の部門ごとの収益割合

Chart.js

導入手順

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

2.HTMLとJavaScriptコード

D3.js

導入手順

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

2.CSSを追加

3.HTMLとJavaScriptコード

ApexCharts

導入手順

1.CDNリンクの追加

2.HTMLとJavaScriptコード

Google Charts

導入手順

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

2.JavaScriptを追加

3.HTML

Chartist.js

導入手順

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

2.CSSの設定

2.HTMLとJavaScriptを追加

まとめ

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

円グラフとは？

棒グラフが向いている活用例

円グラフの種類

円グラフのメリットとデメリット

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

おすすめライブラリ紹介

1 Chart.js

2 D3.js

3 ApexCharts

4 Google Charts

5 Chartist.js

ライブラリ比較表

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

サンプルデータ：企業の部門ごとの収益割合

Chart.js

導入手順

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

2.HTMLとJavaScriptコード

D3.js

導入手順

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

2.CSSを追加

3.HTMLとJavaScriptコード

ApexCharts

導入手順

1.CDNリンクの追加

2.HTMLとJavaScriptコード

Google Charts

導入手順

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

2.JavaScriptを追加

3.HTML

Chartist.js

導入手順

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

2.CSSの設定

2.HTMLとJavaScriptを追加

まとめ

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

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

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

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

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