在React/Next.js+TypeScript中配置基础折线图遇刻度注册问题

问题背景 #

已完成如下依赖配置：

"dependencies": {
    "chart.js": "^3.9.1",
    "next": "12.2.3",
    "react-chartjs-2": "^4.3.1",
},

编写的Home组件代码：

import { useRouter } from 'next/router'
import { Line, Chart } from 'react-chartjs-2'
import { CategoryScale } from 'chart.js'

export default function Home() {
    const router = useRouter()
    ChartJS.register(CategoryScale)

    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'First dataset',
                data: [33, 53, 85, 41, 44, 65],
                fill: true,
                backgroundColor: 'rgba(75,192,192,0.2)',
                borderColor: 'rgba(75,192,192,1)',
            },
            {
                label: 'Second dataset',
                data: [33, 25, 35, 51, 54, 76],
                fill: false,
                borderColor: '#742774',
            },
        ],
    }

    return (
        <Line data={data} />
    )
}

运行时出现报错：

Error: "category" is not a registered scale.

参考官方文档时，不清楚代码中的ChartJS来源，不知道该用什么替代。

解决方案 #

你可以通过以下两种方式解决：

方式一：使用从react-chartjs-2导入的Chart #

你已经从react-chartjs-2中导入了Chart，只需把代码里的ChartJS.register(...)替换成Chart.register(...)即可。

修改后的组件代码：

import { useRouter } from 'next/router'
import { Line, Chart } from 'react-chartjs-2'
import { CategoryScale } from 'chart.js'

export default function Home() {
    const router = useRouter()
    // 替换ChartJS为已导入的Chart
    Chart.register(CategoryScale)

    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'First dataset',
                data: [33, 53, 85, 41, 44, 65],
                fill: true,
                backgroundColor: 'rgba(75,192,192,0.2)',
                borderColor: 'rgba(75,192,192,1)',
            },
            {
                label: 'Second dataset',
                data: [33, 25, 35, 51, 54, 76],
                fill: false,
                borderColor: '#742774',
            },
        ],
    }

    return (
        <Line data={data} />
    )
}

方式二：直接从chart.js导入Chart #

也可以直接从chart.js库中导入Chart，再调用它的register方法：

import { useRouter } from 'next/router'
import { Line } from 'react-chartjs-2'
import { Chart, CategoryScale } from 'chart.js' // 从chart.js导入Chart

export default function Home() {
    const router = useRouter()
    Chart.register(CategoryScale)

    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'First dataset',
                data: [33, 53, 85, 41, 44, 65],
                fill: true,
                backgroundColor: 'rgba(75,192,192,0.2)',
                borderColor: 'rgba(75,192,192,1)',
            },
            {
                label: 'Second dataset',
                data: [33, 25, 35, 51, 54, 76],
                fill: false,
                borderColor: '#742774',
            },
        ],
    }

    return (
        <Line data={data} />
    )
}

额外优化建议 #

建议把Chart.register的调用放在组件外部，避免组件每次渲染都重复注册：

import { useRouter } from 'next/router'
import { Line, Chart } from 'react-chartjs-2'
import { CategoryScale } from 'chart.js'

// 放在组件外部，仅注册一次
Chart.register(CategoryScale)

export default function Home() {
    const router = useRouter()

    const data = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [
            {
                label: 'First dataset',
                data: [33, 53, 85, 41, 44, 65],
                fill: true,
                backgroundColor: 'rgba(75,192,192,0.2)',
                borderColor: 'rgba(75,192,192,1)',
            },
            {
                label: 'Second dataset',
                data: [33, 25, 35, 51, 54, 76],
                fill: false,
                borderColor: '#742774',
            },
        ],
    }

    return (
        <Line data={data} />
    )
}

内容的提问来源于stack exchange，提问作者János