React项目LineGraph组件不显示，报错‘category is not a registered scale’

错误原因 #

Chart.js 3.x及以上版本不再自动注册所有图表组件、比例尺等核心模块，而你使用的react-chartjs-2依赖的正是该版本，因此需要手动注册所需的CategoryScale（即报错中提到的category比例尺）以及其他必要的图表组件。

解决方案 #

修改LineGraph.js文件，完成以下核心调整：

1. 导入并注册Chart.js核心组件
   在文件顶部添加Chart.js组件导入和注册代码，确保所需模块被加载：

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import numeral from "numeral";
// 新增：导入Chart.js所需核心组件
import { Chart, CategoryScale, LinearScale, LineController, LineElement, PointElement, Tooltip, Legend } from 'chart.js';

// 新增：注册组件，解决比例尺未注册问题
Chart.register(CategoryScale, LinearScale, LineController, LineElement, PointElement, Tooltip, Legend);

2. 修正初始状态类型
   原代码中data的初始值为对象{}，但实际应为数组，会导致长度判断失效，将其改为空数组：

const [data, setData] = useState([]);

3. 完善图表比例尺配置（可选）
   在options中添加比例尺配置，明确x轴类型并优化日期显示：

const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  maintainAspectRatio: false,
  tooltips: {
    mode: "index",
    intersect: false,
    callbacks: {
      label: function (tooltipItem, data) {
        return numeral(tooltipItem.value).format("+0,0");
      },
    },
  },
  // 新增：比例尺配置，明确x轴类型并优化显示
  scales: {
    x: {
      type: 'category',
      ticks: {
        maxRotation: 45,
        minRotation: 45,
        autoSkip: true,
        maxTicksLimit: 10
      }
    },
    y: {
      beginAtZero: true
    }
  }
};

修改后的完整LineGraph.js代码 #

import React, { useState, useEffect } from "react";
import { Line } from "react-chartjs-2";
import numeral from "numeral";
import { Chart, CategoryScale, LinearScale, LineController, LineElement, PointElement, Tooltip, Legend } from 'chart.js';

Chart.register(CategoryScale, LinearScale, LineController, LineElement, PointElement, Tooltip, Legend);

const options = {
  legend: {
    display: false,
  },
  elements: {
    point: {
      radius: 0,
    },
  },
  maintainAspectRatio: false,
  tooltips: {
    mode: "index",
    intersect: false,
    callbacks: {
      label: function (tooltipItem, data) {
        return numeral(tooltipItem.value).format("+0,0");
      },
    },
  },
  scales: {
    x: {
      type: 'category',
      ticks: {
        maxRotation: 45,
        minRotation: 45,
        autoSkip: true,
        maxTicksLimit: 10
      }
    },
    y: {
      beginAtZero: true
    }
  }
};

const buildChartData = (data, casesType) => {
  let chartData = [];
  let lastDataPoint;
  for (let date in data.cases) {
    if (lastDataPoint) {
      let newDataPoint = {
        x: date,
        y: data[casesType][date] - lastDataPoint,
      };
      chartData.push(newDataPoint);
    }
    lastDataPoint = data[casesType][date];
  }
  return chartData;
};

function LineGraph({ casesType }) {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          let chartData = buildChartData(data, casesType);
          setData(chartData);
        });
    };

    fetchData();
  }, [casesType]);

  return (
    <div>
      {data?.length > 0 && (
        <Line
          data={{
            datasets: [
              {
                backgroundColor: "rgba(204, 16, 52, 0.5)",
                borderColor: "#CC1034",
                data: data,
              },
            ],
          }}
          options={options}
        />
      )}
    </div>
  );
}

export default LineGraph;

额外优化建议 #

• App.js中<h3>Word Wide New </h3>可修改为<h3>Worldwide New {casesType}</h3>，让标题与当前展示的数据类型匹配，更直观。

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