开发加密货币价格图表应用时遇react-chartjs-2‘category未注册比例尺’错误

问题原因 #

你遇到的报错是因为Chart.js版本不兼容：教程使用的是Chart.js v2版本，而你当前安装的是v3及以上版本。v3+对API做了大幅改动，包括scale的注册方式、配置结构都和v2完全不同，导致原代码无法正常运行。

解决方案 #

以下是适配Chart.js v3+的修正代码，同时优化部分逻辑：

import React from 'react';
import { Line } from 'react-chartjs-2';
// 导入Chart.js核心及所需组件、scale
import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend } from 'chart.js';
import { Col, Row, Typography } from 'antd';

// 手动注册必要组件（v3+不再自动注册所有组件）
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip,
  Legend
);

const { Title } = Typography;

const LineChart = ({ coinHistory, currentPrice, coinName }) => {
  const coinPrice = [];
  const coinTimestamp = [];

  // 用forEach简化循环逻辑
  coinHistory?.data?.history?.forEach(item => {
    coinPrice.push(item.price);
    coinTimestamp.push(new Date(item.timestamp).toLocaleDateString());
  });

  const data = {
    labels: coinTimestamp,
    datasets: [
      {
        label: 'Price In USD',
        data: coinPrice,
        fill: false,
        backgroundColor: '#0071bd',
        borderColor: '#0071bd',
      },
    ],
  };

  // v3+的scales配置结构变更：yAxes数组改为y对象
  const options = {
    scales: {
      y: {
        beginAtZero: true,
      },
      x: {
        type: 'category' // 显式指定x轴为category scale，可选（默认就是）
      }
    },
  };

  return (
    <>
      <Row className="chart-header">
        <Title level={2} className="chart-title">{coinName} Price Chart </Title>
        <Col className="price-container">
          <Title level={5} className="price-change">Change: {coinHistory?.data?.change}%</Title>
          <Title level={5} className="current-price">Current {coinName} Price: $ {currentPrice}</Title>
        </Col>
      </Row>
      <Line data={data} options={options} />
    </>
  );
};

export default LineChart;

关键改动说明 #

1. 组件注册：v3+版本的Chart.js需要手动注册使用到的组件（如CategoryScale、LineElement等），否则会出现未注册的报错。
2. 配置结构调整：v2中的yAxes数组在v3+中改为y对象，所有轴配置直接挂载到对应轴的属性下，层级更简洁。
3. 循环逻辑优化：用forEach替代传统for循环，代码更易读。

备选方案（降级版本） #

如果想完全沿用教程代码，可以降级到和教程一致的版本：

npm install chart.js@2.9.4 react-chartjs-2@2.11.1

但不推荐此方案，旧版本可能存在安全漏洞和功能局限。

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