【CSS & JavaScript & SVG対応】円グラフ（扇形図）のアニメーション表現まとめ

はじめに

円グラフ（パイチャート）は、比率や構成比を視覚的に伝えるのに最適なUIコンポーネントです。最近、業務で使う機会があり、さまざまな方法でエフェクトをつけて表示する実装を試しました。

この記事では、以下の3パターンで実装する方法を紹介します：

• CSSのみでのグラフ描画
• JavaScriptによるアニメーション付き描画
• SVGによる柔軟なビジュアル表現

さらに、ツールチップ表示などの補足機能も加えています。シンプルな表示から動きのある演出まで、ニーズに合わせて活用してください。

CSSアニメーションで扇形図を表示

<!-- HTML -->
<div class="pie-chart" style="--percentage: 65; --color: #4CAF50;"></div>
/* CSS */
<style>
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) 0%,
    var(--color) calc(var(--percentage) * 1%),
    #eee calc(var(--percentage) * 1%),
    #eee 100%
  );
  transition: all 0.5s ease-out;
}

/* ホバーエフェクト */
.pie-chart:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
</style>

JavaScriptでアニメーション

// 扇形図をアニメーションで描画
function animatePieChart(elementId, percentage, color) {
  const chart = document.getElementById(elementId);
  let current = 0;
  const interval = setInterval(() => {
    if (current >= percentage) {
      clearInterval(interval);
      return;
    }
    current++;
    chart.style.setProperty('--percentage', current);
    chart.style.setProperty('--color', color);
  }, 20);
}

// 使い方
animatePieChart('myPieChart', 75, '#FF6384');

SVGを使った扇形図

<svg width="200" height="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="90" fill="none" stroke="#eee" stroke-width="20"/>
  <circle cx="100" cy="100" r="90" fill="none" stroke="#4CAF50" stroke-width="20"
          stroke-dasharray="565.48" stroke-dashoffset="565.48"
          style="animation: pie-fill 2s ease-out forwards;"/>
  <text x="100" y="110" text-anchor="middle" font-size="24" fill="#333">65%</text>
</svg>

<style>
  @keyframes pie-fill {
    to { stroke-dashoffset: calc(565.48 - (565.48 * 0.65)); }
  }
</style>

ツールチップ表示

// 扇形図のセクションにマウスオーバーした時にツールチップを表示
document.querySelectorAll('.pie-section').forEach(section => {
  section.addEventListener('mouseover', function(e) {
    const tooltip = document.createElement('div');
    tooltip.className = 'pie-tooltip';
    tooltip.textContent = this.dataset.value + '%: ' + this.dataset.label;
    document.body.appendChild(tooltip);
    
    const rect = this.getBoundingClientRect();
    tooltip.style.left = rect.left + 'px';
    tooltip.style.top = (rect.top - 30) + 'px';
  });
  
  section.addEventListener('mouseout', function() {
    const tooltip = document.querySelector('.pie-tooltip');
    if (tooltip) tooltip.remove();
  });
});

これらのコードはプロジェクトに応じて調整して使ってください。特にアニメーションの速度や色はデザインに合わせて変更すると良いでしょう。