ReactとSVGで、ドーナツグラフを描く方法

export type Slice = { label: string; value: number; color: string };
export type Arc = Slice & { ratio: number; start: number; end: number };

// 値を、12時の位置から時計回りに並べた角度（ラジアン）に変える
export function toArcs(data: Slice[]): Arc[] {
  const total = data.reduce((sum, d) => sum + d.value, 0);
  let acc = 0;
  return data.map((d) => {
    const ratio = total > 0 ? d.value / total : 0;
    const start = acc * 2 * Math.PI;
    acc += ratio;
    return { ...d, ratio, start, end: acc * 2 * Math.PI };
  });
}

// 12時の位置を 0 として、時計回りに a だけ回った円周上の点
function point(cx: number, cy: number, r: number, a: number): string {
  const x = cx + r * Math.sin(a);
  const y = cy - r * Math.cos(a); // SVG の y は下向きに増えるので引く
  return `${x.toFixed(2)} ${y.toFixed(2)}`;
}

// 外側の半径 r、内側の半径 ri の輪を、start から end まで切り取った形の d 属性
export function arcPath(cx: number, cy: number, r: number, ri: number, start: number, end: number): string {
  if (end - start >= 2 * Math.PI - 1e-6) {
    // 1周ちょうどだと始点と終点が同じ点になり、弧が描かれない。半周ずつ2本に分ける
    const half = start + Math.PI;
    return [
      `M ${point(cx, cy, r, start)}`,
      `A ${r} ${r} 0 1 1 ${point(cx, cy, r, half)}`,
      `A ${r} ${r} 0 1 1 ${point(cx, cy, r, start)}`,
      'Z',
      `M ${point(cx, cy, ri, start)}`,
      `A ${ri} ${ri} 0 1 0 ${point(cx, cy, ri, half)}`,
      `A ${ri} ${ri} 0 1 0 ${point(cx, cy, ri, start)}`,
      'Z',
    ].join(' ');
  }
  const large = end - start > Math.PI ? 1 : 0; // 半周より長い弧なら 1
  return [
    `M ${point(cx, cy, r, start)}`,
    `A ${r} ${r} 0 ${large} 1 ${point(cx, cy, r, end)}`, // 外側の弧（時計回り）
    `L ${point(cx, cy, ri, end)}`,
    `A ${ri} ${ri} 0 ${large} 0 ${point(cx, cy, ri, start)}`, // 内側の弧（反時計回りで戻る）
    'Z',
  ].join(' ');
}

M 81.72 216.70 A 104 104 0 0 1 17.84 100.51 L 51.24 106.88 A 70 70 0 0 0 94.23 185.08 Z

M 120.00 16.00 A 104 104 0 1 1 120.00 16.00 L 120.00 50.00 A 70 70 0 1 0 120.00 50.00 Z

import { useId, useState } from 'react';
import { arcPath, toArcs, type Slice } from './arc';

type Props = {
  data: Slice[];
  title: string; // 読み上げ用の名前（<title> に入る）
  unit?: string;
};

const SIZE = 240; // viewBox の幅と高さ
const C = SIZE / 2; // 中心の座標
const R = 104; // 外側の半径（選んだ扇形を外へ 6 ずらしても、はみ出さない大きさ）
const RI = 70; // 内側の半径（穴の大きさ）

const percent = (ratio: number) => `${(ratio * 100).toFixed(1)}%`;

export function DonutChart({ data, title, unit = '' }: Props) {
  const titleId = useId();
  const descId = useId();
  const [active, setActive] = useState<number | null>(null);
  const arcs = toArcs(data);
  const total = data.reduce((sum, d) => sum + d.value, 0);
  const toggle = (i: number) => setActive((cur) => (cur === i ? null : i));
  const sel = active === null ? null : arcs[active];

  return (
    <figure className="donut">
      <svg
        viewBox={`0 0 ${SIZE} ${SIZE}`}
        role="img"
        aria-labelledby={titleId}
        aria-describedby={descId}
        style={{ display: 'block', width: '100%', maxWidth: SIZE, height: 'auto' }}
      >
        <title id={titleId}>{title}</title>
        <desc id={descId}>
          {arcs.map((a) => `${a.label} ${a.value}${unit}（${percent(a.ratio)}）`).join('、')}
        </desc>
        {arcs.map((a, i) => {
          const mid = (a.start + a.end) / 2;
          // 選んだ扇形だけ、中心から外へ 6 ずらす
          const dx = i === active ? 6 * Math.sin(mid) : 0;
          const dy = i === active ? -6 * Math.cos(mid) : 0;
          return (
            <path
              key={a.label}
              className="slice"
              d={arcPath(C, C, R, RI, a.start, a.end)}
              fill={a.color}
              stroke="#fff"
              strokeWidth={2}
              opacity={active === null || i === active ? 1 : 0.45}
              style={{ transform: `translate(${dx}px, ${dy}px)` }}
              onClick={() => toggle(i)}
            />
          );
        })}
        <text x={C} y={C - 8} textAnchor="middle" fontSize={14} fill="#5b6870">
          {sel ? sel.label : '合計'}
        </text>
        <text x={C} y={C + 18} textAnchor="middle" fontSize={22} fontWeight="bold" fill="#1f2a30">
          {sel ? percent(sel.ratio) : `${total}${unit}`}
        </text>
      </svg>
      <figcaption>
        <ul className="legend">
          {arcs.map((a, i) => (
            <li key={a.label}>
              <button type="button" aria-pressed={i === active} onClick={() => toggle(i)}>
                <span className="swatch" style={{ background: a.color }} aria-hidden="true" />
                {a.label} {a.value}
                {unit}（{percent(a.ratio)}）
              </button>
            </li>
          ))}
        </ul>
      </figcaption>
    </figure>
  );
}

import { DonutChart } from './DonutChart';
import type { Slice } from './arc';

// 例のデータ（架空の数字）
const drinks: Slice[] = [
  { label: 'コーヒー', value: 56, color: '#00c8e8' },
  { label: '紅茶', value: 22, color: '#067a98' },
  { label: '緑茶', value: 13, color: '#7fdcec' },
  { label: 'ココア', value: 9, color: '#9aa5ab' },
];

export function App() {
  return <DonutChart data={drinks} title="飲み物ごとの注文数" unit="杯" />;
}

.slice { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; }
@media (prefers-reduced-motion: reduce) { .slice { transition: none; } }

.legend { list-style: none; padding: 0; margin: 12px 0 0; }
.legend button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px; font: inherit; cursor: pointer; }
.legend button[aria-pressed="true"] { font-weight: bold; }
.swatch { width: 12px; height: 12px; border-radius: 2px; }

<circle cx="120" cy="120" r="87" fill="none" stroke="#00c8e8" stroke-width="34" pathLength="100" stroke-dasharray="56 44" stroke-dashoffset="0" transform="rotate(-90 120 120)"/>