レーダーチャートライブラリ比較

'use client';
import {
  RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis,
  Legend, ResponsiveContainer,
} from 'recharts';

const data = [
  { subject: 'デザイン', A: 120, B: 110 },
  { subject: 'パフォーマンス', A: 98, B: 130 },
  { subject: 'ドキュメント', A: 86, B: 130 },
  { subject: 'コミュニティ', A: 99, B: 100 },
  { subject: '学習コスト', A: 85, B: 90 },
];

export function RechartsRadarChart() {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <RadarChart data={data}>
        <PolarGrid />
        <PolarAngleAxis dataKey="subject" />
        <PolarRadiusAxis angle={30} domain={[0, 150]} />
        <Radar name="ライブラリA" dataKey="A" stroke="#3b82f6" fill="#3b82f6" fillOpacity={0.4} />
        <Radar name="ライブラリB" dataKey="B" stroke="#10b981" fill="#10b981" fillOpacity={0.4} />
        <Legend />
      </RadarChart>
    </ResponsiveContainer>
  );
}

'use client';
import { ResponsiveRadar } from '@nivo/radar';

const data = [
  { subject: 'デザイン', A: 120, B: 110 },
  { subject: 'パフォーマンス', A: 98, B: 130 },
  { subject: 'ドキュメント', A: 86, B: 130 },
  { subject: 'コミュニティ', A: 99, B: 100 },
  { subject: '学習コスト', A: 85, B: 90 },
];

export function NivoRadarChart() {
  return (
    <div style={{ height: 300 }}>
      <ResponsiveRadar
        data={data}
        keys={['A', 'B']}
        indexBy="subject"
        maxValue={150}
        margin={{ top: 40, right: 60, bottom: 40, left: 60 }}
        colors={['#3b82f6', '#10b981']}
        fillOpacity={0.4}
        legends={[{ anchor: 'top-left', direction: 'column', itemWidth: 80, itemHeight: 20 }]}
      />
    </div>
  );
}

'use client';
import { Radar } from 'react-chartjs-2';
import {
  Chart as ChartJS, RadialLinearScale, PointElement,
  LineElement, Filler, Tooltip, Legend,
} from 'chart.js';

ChartJS.register(RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend);

const data = {
  labels: ['デザイン', 'パフォーマンス', 'ドキュメント', 'コミュニティ', '学習コスト'],
  datasets: [
    {
      label: 'ライブラリA',
      data: [120, 98, 86, 99, 85],
      backgroundColor: 'rgba(59, 130, 246, 0.3)',
      borderColor: '#3b82f6',
    },
    {
      label: 'ライブラリB',
      data: [110, 130, 130, 100, 90],
      backgroundColor: 'rgba(16, 185, 129, 0.3)',
      borderColor: '#10b981',
    },
  ],
};

export function ChartJSRadarChart() {
  return <Radar data={data} options={{ responsive: true, maintainAspectRatio: false }} height={300} />;
}

'use client';
import dynamic from 'next/dynamic';
const Plot = dynamic(() => import('react-plotly.js'), { ssr: false });

export function PlotlyRadarChart() {
  return (
    <Plot
      data={[{
        type: 'scatterpolar',
        r: [85, 70, 90, 60, 75, 80],
        theta: ['攻撃力', '防御力', 'スピード', 'スタミナ', 'テクニック', 'メンタル'],
        fill: 'toself',
        name: 'プレイヤーA',
      }, {
        type: 'scatterpolar',
        r: [65, 90, 55, 80, 85, 70],
        theta: ['攻撃力', '防御力', 'スピード', 'スタミナ', 'テクニック', 'メンタル'],
        fill: 'toself',
        name: 'プレイヤーB',
      }]}
      layout={{
        polar: { radialaxis: { visible: true, range: [0, 100] } },
        height: 300,
        margin: { t: 20, b: 20, l: 40, r: 40 },
      }}
      style={{ width: '100%' }}
      config={{ responsive: true }}
    />
  );
}

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

export function EChartsRadarChart() {
  const option = {
    legend: { data: ['プレイヤーA', 'プレイヤーB'], top: 'top' },
    radar: {
      indicator: [
        { name: '攻撃力', max: 100 },
        { name: '防御力', max: 100 },
        { name: 'スピード', max: 100 },
        { name: 'スタミナ', max: 100 },
        { name: 'テクニック', max: 100 },
        { name: 'メンタル', max: 100 },
      ],
    },
    series: [{
      type: 'radar',
      data: [
        { value: [85, 70, 90, 60, 75, 80], name: 'プレイヤーA' },
        { value: [65, 90, 55, 80, 85, 70], name: 'プレイヤーB' },
      ],
    }],
  };
  return <ReactECharts option={option} style={{ height: 300 }} />;
}

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

export function ApexRadarChart() {
  const options = {
    chart: { type: 'radar' as const, toolbar: { show: false } },
    xaxis: { categories: ['デザイン', 'パフォーマンス', 'ドキュメント', 'コミュニティ', '学習コスト'] },
    yaxis: { show: false, max: 150 },
    fill: { opacity: 0.4 },
    stroke: { width: 2 },
    markers: { size: 4 },
    colors: ['#3b82f6', '#10b981'],
    legend: { show: true },
    dataLabels: { enabled: false },
  };
  const series = [
    { name: 'ライブラリA', data: [120, 98, 86, 99, 85] },
    { name: 'ライブラリB', data: [110, 130, 130, 100, 90] },
  ];
  return <Chart type="radar" options={options} series={series} height={300} width="100%" />;
}