読み込み中...

CSSとJavaScriptを使って円グラフを作成する手法15選

JavaScriptとCSSを使って作成する円グラフ JS
この記事は約39分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

データの可視化は、情報を伝える上で非常に重要な役割を果たします。

中でも、円グラフは全体に対する各項目の割合を直感的に理解しやすく、幅広い場面で活用されています。

しかし、円グラフを作成するには、JavaScriptやCSSの知識が必要で、初心者にとってはハードルが高いと感じるかもしれません。

○JavaScriptとCSSで円グラフを作成するメリット

JavaScriptとCSSを使って円グラフを作成することには、いくつかのメリットがあります。

まず、Webブラウザ上で動作するため、ユーザーは特別なソフトウェアをインストールすることなく、円グラフを閲覧できます。

また、JavaScriptを使えば、動的にデータを更新したり、インタラクティブな操作を加えたりすることが可能です。

CSSを活用することで、見栄えのよいデザインを実現できるのも大きな利点と言えるでしょう。

○この記事で学べること

この記事では、JavaScriptとCSSを使って円グラフを作成する様々な手法を紹介します。

ライブラリを使った方法や、自作のコードによる実装など、初心者から上級者まで、幅広いレベルの読者に対応した内容となっています。

サンプルコードを交えながら、ステップバイステップで解説していくので、実践的なスキルを身につけることができるでしょう。

記事を通して、次のようなことが学べます。

・Chart.jsやVue-chartjs、React-chartjs-2などのライブラリを使った円グラフの作成方法
・CSSのconic-gradientやアニメーションを活用した円グラフのスタイリング
・CanvasやSVGを使ったJavaScriptによる円グラフの自作
・円グラフ作成時のよくあるエラーと対処法
・見栄えのよい円グラフを作るためのコツ

これを学ぶことで、プロジェクトに応じた最適な円グラフの作成方法を選択し、魅力的なデータの可視化を実現できるようになります。

それでは、早速JavaScriptとCSSを使った円グラフ作成の世界に飛び込んでいきましょう！

●ライブラリを使った円グラフの作成

円グラフを作成する際、ゼロから自作するのは大変な労力を要します。

そこで、JavaScriptのライブラリを活用することで、効率的に円グラフを作成できます。

ライブラリを使えば、複雑なコードを書くことなく、シンプルな記述で美しい円グラフを実現できるのです。

○Chart.jsを使った円グラフの作成

Chart.jsは、JavaScriptの人気ライブラリの一つで、柔軟性が高く、様々なタイプのグラフを作成できます。

円グラフもChart.jsを使えば、簡単に作成できます。

では早速、Chart.jsを使って基本的な円グラフを作成してみましょう。

□サンプルコード1：基本的な円グラフの作成

<!DOCTYPE html>
<html>
<head>
  <title>円グラフの作成例</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
          data: [30, 25, 20, 25],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A']
        }]
      }
    });
  </script>
</body>
</html>

このコードでは、まずChart.jsのライブラリを読み込んでいます。

次に、<canvas>要素を用意し、JavaScriptでChart.jsを使ってグラフを描画しています。

type: 'pie'と指定することで、円グラフを作成できます。

dataオブジェクトのlabels配列にラベル名を、datasets配列のdataプロパティにデータを指定します。

backgroundColorプロパティで、各データの色を設定できます。

実行結果は、シンプルな円グラフが表示されます。

各データの割合に応じて、円が分割されているのがわかります。

□サンプルコード2：ラベルの表示

先ほどの例では、ラベルは円グラフの外側に表示されていました。

しかし、円グラフ内にパーセンテージを表示したい場合もあるでしょう。

そんな時は、Chart.jsのプラグインを使えば、簡単に実現できます。

<!DOCTYPE html>
<html>
<head>
  <title>円グラフの作成例（ラベル表示）</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
          data: [30, 25, 20, 25],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A']
        }]
      },
      plugins: [ChartDataLabels],
      options: {
        plugins: {
          datalabels: {
            formatter: (value, ctx) => {
              const datapoints = ctx.chart.data.datasets[0].data;
              const total = datapoints.reduce((total, datapoint) => total + datapoint, 0);
              const percentage = value / total * 100;
              return percentage.toFixed(2) + "%";
            },
            color: '#fff',
          }
        }
      }
    });
  </script>
</body>
</html>

このコードでは、chartjs-plugin-datalabelsプラグインを追加で読み込んでいます。

pluginsオプションでプラグインを有効化し、optionsのplugins.datalabelsでラベルの表示をカスタマイズしています。

formatter関数で、パーセンテージを計算し、colorプロパティでラベルの色を白に設定しています。

実行すると、各データの割合が円グラフ内にパーセンテージで表示されます。これにより、データの内訳がより明確になりました。

□サンプルコード3：アニメーション効果の追加

静的な円グラフも良いですが、アニメーション効果を加えることで、より印象的な円グラフを作成できます。

Chart.jsでは、簡単にアニメーションを追加できます。

<!DOCTYPE html>
<html>
<head>
  <title>円グラフの作成例（アニメーション）</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
  <canvas id="myChart"></canvas>

  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [{
          data: [30, 25, 20, 25],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A']
        }]
      },
      plugins: [ChartDataLabels],
      options: {
        plugins: {
          datalabels: {
            formatter: (value, ctx) => {
              const datapoints = ctx.chart.data.datasets[0].data;
              const total = datapoints.reduce((total, datapoint) => total + datapoint, 0);
              const percentage = value / total * 100;
              return percentage.toFixed(2) + "%";
            },
            color: '#fff',
          }
        },
        animation: {
          animateScale: true,
          animateRotate: true
        }
      }
    });
  </script>
</body>
</html>

先ほどのコードに、options.animationを追加しました。

animateScaleとanimateRotateをtrueに設定することで、円グラフが拡大しながら回転するアニメーションが適用されます。

実行結果を見ると、ページを読み込んだ時に、円グラフが徐々に拡大しながら、回転しているのがわかります。

こうしたアニメーション効果を加えることで、ユーザーの注目を集めることができるでしょう。

○Vue-chartjsを使った円グラフの作成

Vue.jsは、現代的なJavaScriptフレームワークの一つで、コンポーネントベースの開発を可能にします。

Vue.jsとChart.jsを組み合わせることで、リアクティブな円グラフを作成できます。

Vue-chartjsは、Vue.js用のChart.jsラッパーで、Vue.jsの構文でChart.jsを使用できるようにします。

□サンプルコード4：Vue.jsでの円グラフ作成

では早速、Vue-chartjsを使って円グラフを作成してみましょう。

まず、Vue.jsとVue-chartjsをインストールします。

npm install vue vue-chartjs chart.js

次に、Vue.jsコンポーネントを作成します。

<template>
  <div>
    <pie-chart :data="chartData" :options="chartOptions"></pie-chart>
  </div>
</template>

<script>
import { PieChart } from 'vue-chartjs';

export default {
  components: {
    PieChart,
  },
  data() {
    return {
      chartData: {
        labels: ['A', 'B', 'C', 'D'],
        datasets: [
          {
            data: [30, 25, 20, 25],
            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'],
          },
        ],
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false,
      },
    };
  },
};
</script>

このコードでは、PieChartコンポーネントをインポートし、componentsオプションで登録しています。

dataオプションでは、グラフのデータとオプションを定義しています。chartDataには、ラベルとデータセットを指定します。

chartOptionsでは、グラフのレスポンシブ性や縦横比の維持を設定できます。

実行結果は、Vue.jsアプリケーション内に円グラフが表示されます。

データが変更されると、グラフも自動的に更新されるため、リアクティブな動作が実現できます。

○React-chartjs-2を使った円グラフの作成

Reactは、Facebookが開発した人気のJavaScriptライブラリです。

React-chartjs-2は、ReactでChart.jsを使うためのライブラリで、Reactの構文でChart.jsを扱えるようにします。

React-chartjs-2を使えば、Reactアプリケーションに円グラフを簡単に組み込めます。

□サンプルコード5：Reactでの円グラフ作成

React-chartjs-2を使った円グラフの作成方法を見ていきましょう。

まず、ReactとReact-chartjs-2をインストールします。

npm install react react-dom react-chartjs-2 chart.js

次に、Reactコンポーネントを作成します。

import React from 'react';
import { Pie } from 'react-chartjs-2';

const PieChart = () => {
  const data = {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        data: [30, 25, 20, 25],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'],
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
  };

  return <Pie data={data} options={options} />;
};

export default PieChart;

このコードでは、Pieコンポーネントをインポートし、dataとoptionsを定義しています。

dataにはラベルとデータセットを、optionsにはグラフのオプションを指定します。

最後に、Pieコンポーネントにデータとオプションを渡して描画しています。

実行結果は、Reactアプリケーション内に円グラフが表示されます。

Reactの特徴であるコンポーネント指向の開発により、円グラフを再利用可能なコンポーネントとして扱えます。

●CSSを使った円グラフの作成

JavaScriptのライブラリを使うことで、比較的簡単に円グラフを作成できることがわかりました。

しかし、CSSを活用することで、さらに表現力豊かな円グラフを作ることができます。

CSSには、グラデーションやアニメーションなどの様々なスタイリング機能があり、これらを駆使することで、視覚的に魅力的な円グラフを実現できるのです。

○conic-gradientを使った円グラフの作成

CSS3で導入された「conic-gradient」は、円錐形のグラデーションを生成する機能です。

この機能を使えば、CSSだけで円グラフを作ることができます。

conic-gradientを使った円グラフの作り方を見ていきましょう。

□サンプルコード6：シンプルな円グラフの作成

では早速、conic-gradientを使ってシンプルな円グラフを作成してみます。

<div class="pie-chart"></div>

<style>
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#FF6384 0% 30%, #36A2EB 30% 55%, #FFCE56 55% 75%, #8BC34A 75% 100%);
}
</style>

このコードでは、<div>要素に「pie-chart」クラスを付与し、CSSで円形のグラデーションを設定しています。

conic-gradientの引数には、色とパーセンテージを交互に指定します。

例えば、#FF6384 0% 30%は、0%から30%までの範囲を#FF6384の色で塗りつぶすことを意味します。

実行結果は、シンプルな円グラフが表示されます。

各色の割合に応じて、円が分割されているのがわかります。

これだけでも、視覚的にわかりやすいグラフを作ることができました。

□サンプルコード7：ドーナツ型の円グラフ

先ほどの例では、円グラフが塗りつぶされていましたが、中央に穴の開いたドーナツ型の円グラフを作ることもできます。

<div class="donut-chart"></div>

<style>
.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:
    conic-gradient(#FF6384 0% 30%, #36A2EB 30% 55%, #FFCE56 55% 75%, #8BC34A 75% 100%),
    #fff;
  background-size: 100%, 60%;
  background-position: center center, center center;
  background-repeat: no-repeat;
}
</style>

このコードでは、背景に2つのグラデーションを重ねています。

1つ目のグラデーションは円グラフ自体、2つ目のグラデーションは中央の白い円です。

background-sizeとbackground-positionで、それぞれのグラデーションのサイズと位置を調整しています。

実行結果は、中央に穴の開いたドーナツ型の円グラフが表示されます。

これにより、グラフの中心にラベルやアイコンを配置するスペースを確保できます。

○CSSアニメーションを使った円グラフ

CSSアニメーションを使えば、静的な円グラフに動きを加えることができます。

アニメーションを付けることで、グラフの変化を強調したり、ユーザーの注目を集めたりできるでしょう。

□サンプルコード8：アニメーションする円グラフ

それでは、CSSアニメーションを使って、円グラフにアニメーション効果を付けてみましょう。

<div class="animated-chart"></div>

<style>
.animated-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(#FF6384 0% 30%, #36A2EB 30% 55%, #FFCE56 55% 75%, #8BC34A 75% 100%);
  animation: chart-animation 2s ease-in-out forwards;
}

@keyframes chart-animation {
  0% {
    background-size: 0% 0%;
  }
  100% {
    background-size: 100% 100%;
  }
}
</style>

このコードでは、@keyframesルールを使ってアニメーションを定義しています。

chart-animationという名前のアニメーションを作成し、background-sizeプロパティを0%から100%まで変化させています。

円グラフの要素にanimationプロパティを設定し、chart-animationを2秒間かけて実行するよう指定しています。

実行結果は、ページを読み込んだ時に、円グラフが徐々に描画されるアニメーションが再生されます。

このようなアニメーション効果を加えることで、グラフの変化をより印象的に伝えることができます。

●JavaScriptで円グラフを自作する

ライブラリやCSSを使った円グラフの作成方法を学んできましたが、JavaScriptを使えば、より柔軟にグラフをカスタマイズできます。

自作のコードで円グラフを描画することで、グラフの細部までコントロールできるようになるのです。

ただ、ゼロから円グラフを作るのは難しいと感じるかもしれません。

そこで、CanvasやSVGといったJavaScriptの描画機能を活用すれば、円グラフの自作にも挑戦できます。

○Canvasを使った円グラフの自作

Canvasは、JavaScriptを使って図形や画像を描画するためのHTML要素です。

Canvasを使えば、自由度の高いグラフィックを作成できます。

では早速、Canvasを使って円グラフを自作してみましょう。

□サンプルコード9：Canvasで円グラフを描画

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

<script>
  const data = [30, 25, 20, 25];
  const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'];

  const canvas = document.getElementById('myChart');
  const ctx = canvas.getContext('2d');

  let startAngle = 0;
  for (let i = 0; i < data.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.arc(200, 200, 150, startAngle, startAngle + (Math.PI * 2 * (data[i] / 100)), false);
    ctx.lineTo(200, 200);
    ctx.fill();
    startAngle += Math.PI * 2 * (data[i] / 100);
  }
</script>

このコードでは、まず<canvas>要素を用意し、幅と高さを指定します。

JavaScriptでは、描画するデータと色を配列で定義しています。

getContext('2d')で2Dレンダリングコンテキストを取得し、ctx変数に代入します。

円グラフを描画するために、forループを使ってデータの数だけ繰り返し処理を行います。

fillStyleプロパティで塗りつぶしの色を設定し、beginPath()で新しいパスを開始します。

moveTo()で描画の開始位置を指定し、arc()で円弧を描画します。

arc()の引数には、中心座標、半径、開始角度、終了角度、反時計回りかどうかを指定します。

lineTo()で円弧の終点から中心に線を引き、fill()で塗りつぶしを行います。

startAngleを更新することで、次のデータの開始角度を設定します。

実行結果は、Canvasに円グラフが描画されます。

データの割合に応じて、円が分割されているのがわかります。

□サンプルコード10：パーセントの表示

円グラフにパーセントを表示することで、データの内訳をより明確に伝えることができます。

Canvasを使ってパーセントを表示してみましょう。

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

<script>
  const data = [30, 25, 20, 25];
  const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'];

  const canvas = document.getElementById('myChart');
  const ctx = canvas.getContext('2d');

  let startAngle = 0;
  for (let i = 0; i < data.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.arc(200, 200, 150, startAngle, startAngle + (Math.PI * 2 * (data[i] / 100)), false);
    ctx.lineTo(200, 200);
    ctx.fill();

    // パーセントを表示
    ctx.fillStyle = '#fff';
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    const angle = startAngle + (Math.PI * (data[i] / 100));
    const x = 200 + Math.cos(angle) * 120;
    const y = 200 + Math.sin(angle) * 120;
    ctx.fillText(data[i] + '%', x, y);

    startAngle += Math.PI * 2 * (data[i] / 100);
  }
</script>

先ほどのコードに、パーセントを表示する処理を追加しました。

fillStyleで文字の色を白に設定し、fontでフォントを指定します。

textAlignとtextBaselineで、テキストの配置を中央に設定します。

パーセントの表示位置を計算するために、angle変数で現在の角度を求めます。

Math.cos()とMath.sin()を使って、円周上の座標を計算し、xとy変数に代入します。

fillText()で、計算した座標にパーセントを表示します。

実行結果を見ると、円グラフの各セクションにパーセントが表示されています。

これにより、データの内訳が一目でわかるようになりました。

○SVGを使った円グラフの自作

SVGは、スケーラブルベクターグラフィックスの略で、XMLベースのマークアップ言語を使って2Dグラフィックを描画する仕組みです。

SVGを使えば、解像度に依存しない美しいグラフィックを作成できます。

SVGとJavaScriptを組み合わせて、円グラフを自作してみましょう。

□サンプルコード11：SVGで円グラフを描画

<svg id="myChart" width="400" height="400"></svg>

<script>
  const data = [30, 25, 20, 25];
  const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'];

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

  let startAngle = 0;
  for (let i = 0; i < data.length; i++) {
    const endAngle = startAngle + (data[i] / 100) * 360;
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    const largeArcFlag = data[i] > 50 ? 1 : 0;
    const pathData = `M 200 200 L 200 50 A 150 150 0 ${largeArcFlag} 1 ${200 + 150 * Math.cos((endAngle * Math.PI) / 180)} ${200 + 150 * Math.sin((endAngle * Math.PI) / 180)} Z`;
    path.setAttribute('d', pathData);
    path.setAttribute('fill', colors[i]);
    svg.appendChild(path);
    startAngle = endAngle;
  }
</script>

このコードでは、<svg>要素を用意し、幅と高さを指定します。

JavaScriptでは、描画するデータと色を配列で定義しています。

円グラフを描画するために、forループを使ってデータの数だけ繰り返し処理を行います。

endAngle変数で、現在のデータの終了角度を計算します。

createElementNS()で、SVGのパス要素を作成し、path変数に代入します。

largeArcFlagは、円弧が180度以上の場合に1、それ以外の場合に0を指定します。

pathData変数で、SVGのパスデータを定義します。Mで始点を指定し、Lで線を引きます。

Aで円弧を描画し、Zでパスを閉じます。

setAttribute()で、パスデータと塗りつぶしの色を設定し、appendChild()でSVG要素にパスを追加します。

startAngleを更新することで、次のデータの開始角度を設定します。

実行結果は、SVGに円グラフが描画されます。

データの割合に応じて、円が分割されているのがわかります。

□サンプルコード12：アニメーションの実装

SVGを使えば、アニメーションを実装することもできます。

円グラフにアニメーションを付けて、視覚的なインパクトを高めてみましょう。

<svg id="myChart" width="400" height="400"></svg>

<script>
  const data = [30, 25, 20, 25];
  const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#8BC34A'];

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

  let startAngle = 0;
  for (let i = 0; i < data.length; i++) {
    const endAngle = startAngle + (data[i] / 100) * 360;
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    const largeArcFlag = data[i] > 50 ? 1 : 0;
    const pathData = `M 200 200 L 200 50 A 150 150 0 ${largeArcFlag} 1 ${200 + 150 * Math.cos((endAngle * Math.PI) / 180)} ${200 + 150 * Math.sin((endAngle * Math.PI) / 180)} Z`;
    path.setAttribute('d', pathData);
    path.setAttribute('fill', colors[i]);
    path.style.strokeDasharray = path.getTotalLength();
    path.style.strokeDashoffset = path.getTotalLength();
    path.style.animation = `chart-animation 1s ease-in-out forwards ${i * 0.2}s`;
    svg.appendChild(path);
    startAngle = endAngle;
  }
</script>

<style>
  @keyframes chart-animation {
    to {
      stroke-dashoffset: 0;
    }
  }
</style>

先ほどのコードに、アニメーションを実装するための処理を追加しました。

getTotalLength()で、パスの全長を取得し、strokeDasharrayとstrokeDashoffsetプロパティに設定します。

これにより、パスが破線のように表示されます。

animationプロパティで、アニメーションを指定します。chart-animationというキーフレームを使い、stroke-dashoffsetを0にすることで、パスが徐々に描画されるようにしています。

forwardsキーワードを使って、アニメーション終了時の状態を維持するようにしています。

${i * 0.2}sで、各パスのアニメーション開始時間をずらしています。

CSSでは、@keyframesルールを使ってアニメーションを定義しています。

stroke-dashoffsetを0にすることで、パスが徐々に描画されるようにしています。

実行結果を見ると、ページを読み込んだ時に、円グラフが徐々に描画されるアニメーションが再生されます。

各セクションが順番に現れ、最終的に完全な円グラフが表示されます。

CanvasやSVGを使えば、このようにJavaScriptで自由度の高い円グラフを作成できます。

アニメーションを付けることで、より印象的なグラフに仕上げることもできるでしょう。

自作のコードで円グラフを描画する方法を学んだことで、ライブラリの内部動作も理解しやすくなったのではないでしょうか。

●よくあるエラーと対処法

JavaScriptやCSSを使って円グラフを作成する際、うまく表示されなかったり、意図した通りの結果にならなかったりすることがあります。

初心者の方は特に、エラーの原因がわからず、頭を抱えてしまうかもしれません。

ただ、エラーは開発者なら誰でも経験するものです。

大切なのは、エラーの原因を特定し、適切な対処法を見つけることです。

ここでは、円グラフを作成する際のよくあるエラーと、その対処法について解説します。

エラーに遭遇した時は、落ち着いて原因を調べ、解決策を試してみましょう。

エラーと上手に付き合うことで、より良いコードを書けるようになります。

○データの合計値が100%にならない場合

円グラフを作成する時、データの合計値が100%になっていないと、グラフが正しく表示されないことがあります。

例えば、データが[30, 25, 20]のように合計が100%に満たない場合や、[30, 25, 20, 30]のように合計が100%を超える場合です。

このようなエラーが発生した際は、データの値を確認し、合計が100%になるように調整しましょう。

データの値を百分率に変換する処理を追加することで、合計値が100%になるようにできます。

const data = [30, 25, 20];
const total = data.reduce((sum, value) => sum + value, 0);
const percentages = data.map(value => (value / total) * 100);
console.log(percentages); // [40, 33.33333333333333, 26.666666666666668]

上記のコードでは、reduce()メソッドを使ってデータの合計値を計算し、map()メソッドで各値を百分率に変換しています。

これにより、データの合計値が100%になるように調整されます。

○円グラフが表示されない場合

円グラフを作成しても、画面に何も表示されないことがあります。

この場合、コードにエラーがある可能性が高いです。

考えられる原因としては、JavaScriptやCSSのコードにタイプミスがあったり、ライブラリを正しく読み込めていなかったりすることが挙げられます。

エラーの原因を特定するために、次の点を確認してみましょう。

・JavaScriptのコードにタイプミスがないか
・CSSのコードにタイプミスがないか
・HTMLで必要な要素が記述されているか
・ライブラリが正しく読み込まれているか
・コンソールにエラーメッセージが表示されていないか

コンソールにエラーメッセージが表示されている場合は、そのメッセージを手がかりにエラーの原因を特定できます。

例えば、Uncaught ReferenceError: Chart is not definedというエラーメッセージが表示された場合は、Chart.jsライブラリが正しく読み込まれていないことが原因だとわかります。

エラーの原因が特定できたら、適切な対処を行いましょう。

タイプミスを修正したり、ライブラリを正しく読み込んだりすることで、円グラフが表示されるようになるはずです。

○ラベルの位置がずれる場合

円グラフにラベルを表示する際、ラベルの位置がずれてしまうことがあります。

特に、データの値が小さい場合や、ラベルのテキストが長い場合に、ラベルが円グラフの外に飛び出してしまうことがあります。

ラベルの位置を調整するには、ラベルの表示位置を計算する処理を修正する必要があります。

例えば、Chart.jsを使っている場合は、plugins.datalabelsオプションを使ってラベルの位置を調整できます。

options: {
  plugins: {
    datalabels: {
      anchor: 'end',
      align: 'end',
      offset: 5,
      formatter: (value, context) => {
        const datapoints = context.chart.data.datasets[0].data;
        const total = datapoints.reduce((total, datapoint) => total + datapoint, 0);
        const percentage = (value / total * 100).toFixed(1) + '%';
        return percentage;
      }
    }
  }
}

上記のコードでは、anchorとalignオプションを'end'に設定することで、ラベルを円グラフの外側に配置しています。

offsetオプションでラベルの位置を微調整し、formatterオプションでパーセンテージを表示するようにしています。

このように、ラベルの位置を調整することで、見やすい円グラフを作成できます。

ライブラリのドキュメントを参照し、適切なオプションを設定することが大切です。

エラーは開発者にとって避けては通れない道です。

しかし、エラーと向き合い、解決策を見つけることで、より良いコードを書けるようになります。

円グラフの作成でエラーに遭遇した時は、焦らずに原因を特定し、対処法を試してみましょう。

エラーを乗り越えることで、円グラフ作成のスキルを磨いていけるはずです。

●円グラフ作成のコツ

JavaScriptとCSSを使って円グラフを作成する方法を学んできましたが、より効果的なグラフを作るには、いくつかのコツがあります。

単にデータを可視化するだけでなく、ユーザーにとって分かりやすく、印象に残るグラフを作ることが大切です。

ここでは、魅力的な円グラフを作成するためのポイントを見ていきましょう。

○データの視覚化を意識する

円グラフを作成する目的は、データを視覚的に表現し、情報を伝えることです。

そのため、データの特徴を捉え、効果的に可視化することが重要です。

例えば、データの割合に大きな差がある場合は、その差が明確に伝わるようなグラフにすると良いでしょう。

具体的には、色の選択や、ラベルの表示方法を工夫することで、データの特徴を強調できます。

色のコントラストを高めたり、ラベルにパーセンテージを表示したりすることで、ユーザーがデータの内訳を一目で理解できるようになります。

const data = [70, 20, 10];
const colors = ['#FF6384', '#36A2EB', '#FFCE56'];
const labels = data.map((value, index) => `${value}%`);

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: data,
      backgroundColor: colors,
    }],
  },
  options: {
    plugins: {
      datalabels: {
        formatter: (value, ctx) => labels[ctx.dataIndex],
        color: '#fff',
      },
    },
  },
});

上記のコードでは、データの割合に応じて色を設定し、ラベルにパーセンテージを表示しています。

これにより、データの特徴が視覚的に強調され、ユーザーに伝わりやすいグラフになります。

○色の選択を工夫する

円グラフの色選びは、グラフの印象を大きく左右します。

色の組み合わせによって、グラフの見栄えが大きく変わるのです。

色選びのポイントとしては、次のようなことが挙げられます。

・データの特徴を表現できる色を選ぶ
・色のコントラストを考慮し、区別しやすい配色にする
・色の数は最小限に抑える
・色覚の多様性に配慮し、色だけでなく模様でも区別できるようにする

例えば、次のようなカラーパレットを使うことで、見やすく魅力的な円グラフを作ることができます。

const colors = [
  '#FF6384',
  '#36A2EB',
  '#FFCE56',
  '#4BC0C0',
  '#9966FF',
  '#FF9F40',
  '#FF6384',
  '#36A2EB',
];

上記のカラーパレットは、鮮やかで区別しやすい色を組み合わせたものです。

これらの色を使って円グラフを作成することで、データの特徴が視覚的に伝わりやすくなります。

また、色だけでなく、模様を併用することで、色覚の多様性にも配慮できます。

例えば、次のように、色と模様を組み合わせることで、色が識別しにくい場合でもデータの区別がつくようになります。

.chart-segment-0 {
  background-color: #FF6384;
}

.chart-segment-1 {
  background-color: #36A2EB;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.chart-segment-2 {
  background-color: #FFCE56;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

上記のCSSコードでは、色と模様を組み合わせて、各セグメントを区別しやすくしています。

このように、色選びを工夫することで、より分かりやすく魅力的な円グラフを作ることができます。

○インタラクティブ性を高める

円グラフにインタラクティブ性を持たせることで、ユーザーの関心を引き付け、データへの理解を深めることができます。

例えば、マウスオーバーした時にデータの詳細を表示したり、クリックした時に別のグラフを表示したりするなど、ユーザーの操作に応じてグラフが変化するようにすると効果的です。

ここでは、Chart.jsを使ってインタラクティブな円グラフを作成する例を紹介します。

const ctx = document.getElementById('myChart').getContext('2d');
new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['A', 'B', 'C'],
    datasets: [{
      data: [30, 40, 30],
      backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
    }],
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: (context) => {
            const label = context.label;
            const value = context.parsed;
            const total = context.dataset.data.reduce((a, b) => a + b, 0);
            const percentage = ((value / total) * 100).toFixed(1);
            return `${label}: ${percentage}%`;
          },
        },
      },
    },
    onClick: (event, elements) => {
      if (elements.length > 0) {
        const index = elements[0].index;
        alert(`データ${index + 1}がクリックされました`);
      }
    },
  },
});

上記のコードでは、tooltipオプションを使ってマウスオーバー時の詳細表示を設定しています。

callbacks.labelで、表示するテキストをカスタマイズし、パーセンテージを表示するようにしています。

また、onClickオプションを使って、クリック時の動作を設定しています。

クリックされた要素のインデックスを取得し、アラートでメッセージを表示するようにしています。

まとめ

JavaScriptとCSSを使った円グラフの作成方法について、ライブラリを使った手法から自作のコードまで、様々なアプローチを解説してきました。

この記事が、円グラフ作成に挑戦する開発者の皆さんにとって、実践的なガイドとなれば幸いです。

サンプルコードを参考に、実際にコードを書いて試行錯誤することで、より深い理解が得られるはずです。

円グラフ作成のスキルを身につけ、魅力的なデータビジュアライゼーションを実現していきましょう！