ゲージ／ラジアルバーチャートライブラリ比較

'use client';
import {
  RadialBarChart, RadialBar, Legend, Tooltip, ResponsiveContainer,
} from 'recharts';

const data = [
  { name: '製品A', value: 85, fill: '#3b82f6' },
  { name: '製品B', value: 72, fill: '#10b981' },
  { name: '製品C', value: 91, fill: '#8b5cf6' },
  { name: '製品D', value: 63, fill: '#f97316' },
];

export function RechartsRadialBarChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadialBarChart cx="50%" cy="50%" innerRadius="20%" outerRadius="80%" data={data}>
        <RadialBar dataKey="value" cornerRadius={4} label={{ position: 'insideStart', fill: '#fff' }} />
        <Legend />
        <Tooltip />
      </RadialBarChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsivePie } from '@nivo/pie';

const data = [
  { id: '製品A', value: 85, color: '#3b82f6' },
  { id: '製品B', value: 72, color: '#10b981' },
  { id: '製品C', value: 91, color: '#8b5cf6' },
  { id: '製品D', value: 63, color: '#f97316' },
];

export function NivoRadialBarChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsivePie
        data={data}
        margin={{ top: 20, right: 80, bottom: 20, left: 80 }}
        innerRadius={0.5}
        padAngle={2}
        cornerRadius={4}
        colors={{ datum: 'data.color' }}
        borderWidth={1}
        startAngle={-90}
        endAngle={90}
        legends={[{
          anchor: 'bottom',
          direction: 'row',
          itemWidth: 80,
          itemHeight: 20,
        }]}
      />
    </div>
  );
}

'use client';
import { Doughnut } from 'react-chartjs-2';
import {
  Chart as ChartJS, ArcElement, Tooltip, Legend,
} from 'chart.js';

ChartJS.register(ArcElement, Tooltip, Legend);

const data = {
  labels: ['製品A', '製品B', '製品C', '製品D'],
  datasets: [{
    data: [85, 72, 91, 63],
    backgroundColor: [
      'rgba(59, 130, 246, 0.8)',
      'rgba(16, 185, 129, 0.8)',
      'rgba(139, 92, 246, 0.8)',
      'rgba(249, 115, 22, 0.8)',
    ],
    borderColor: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
    borderWidth: 2,
  }],
};

export function ChartJSRadialBarChart() {
  return (
    <Doughnut data={data}
      options={{
        responsive: true,
        maintainAspectRatio: false,
        circumference: 180,
        rotation: -90,
      }}
      height={300} />
  );
}

'use client';
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });

export function ApexRadialBarChart() {
  const options = {
    chart: { type: 'radialBar' as const, toolbar: { show: false } },
    plotOptions: {
      radialBar: {
        dataLabels: {
          name: { fontSize: '14px' },
          value: { fontSize: '12px', formatter: (val: number) => `${val}%` },
          total: { show: true, label: '平均', formatter: () => '77.75%' },
        },
      },
    },
    labels: ['製品A', '製品B', '製品C', '製品D'],
    colors: ['#3b82f6', '#10b981', '#8b5cf6', '#f97316'],
  };
  const series = [85, 72, 91, 63];
  return <Chart type="radialBar" options={options} series={series} height={300} width="100%" />;
}