使用react-chartjs-2绘制股票组合折线图时遇'category未注册'错误

报错"category" is not a registered scale的核心原因是Chart.js v3+采用模块化架构，不再默认注册所有缩放类型，"category"属于需要手动注册的缩放组件，react-chartjs-2不会自动帮你完成这一步。

解决步骤：

1. 从chart.js导入所需的组件模块
2. 调用Chart.register()注册这些模块，包括CategoryScale以及折线图依赖的其他组件

示例代码：

// 导入Chart核心及必要组件
import { Chart, CategoryScale, LineController, LineElement, PointElement, LinearScale, Tooltip, Legend } from 'chart.js';
import { Line } from 'react-chartjs-2';

// 注册组件，让Chart.js能识别category缩放类型
Chart.register(
  CategoryScale,
  LineController,
  LineElement,
  PointElement,
  LinearScale,
  Tooltip,
  Legend
);

// 你的折线图组件
const PortfolioChart = ({ portfolioData }) => {
  const chartData = {
    labels: portfolioData.map(item => item.date),
    datasets: [{
      label: '投资组合总价值',
      data: portfolioData.map(item => item.totalValue),
      borderColor: '#2196f3',
      backgroundColor: 'rgba(33, 150, 243, 0.1)',
      tension: 0.3
    }]
  };

  const chartOptions = {
    scales: {
      x: {
        type: 'category', // 现在可以正常使用该缩放类型
        title: {
          display: true,
          text: '日期'
        }
      },
      y: {
        title: {
          display: true,
          text: '总价值'
        }
      }
    }
  };

  return <Line data={chartData} options={chartOptions} />;
};

export default PortfolioChart;

注意：折线图依赖LineController、LineElement、PointElement这些组件，LinearScale是y轴常用的数值缩放类型，Tooltip和Legend用于交互和图例展示，这些都需要一起注册才能保证折线图正常运行。

内容的提问来源于stack exchange，提问作者a7dc