React+Chart.js柱状图开发报错求助：语法错误及示例无法运行

嘿，刚接触React和JavaScript就尝试做图表功能，已经很棒啦！我看到你遇到了语法错误和Chart.js无法正常运行的问题，咱们一步步来解决～

首先，先搞定语法错误的问题 #

你代码片段里的几个明显问题导致了Syntax error: Unexpected token, expected }：

• <container>不是合法的HTML/React标签，React里需要用标准的HTML元素，比如<div>来包裹内容
• 代码被截断了，height="40...没写完，而且箭头函数的JSX返回部分没有正确闭合括号，这直接触发了语法报错

然后，Chart.js在React中的正确使用方式 #

即使语法修复了，直接在React组件里初始化Chart.js还会有问题——React组件渲染时，canvas元素可能还没挂载到DOM上，直接调用new Chart()会找不到元素。所以我们需要用useEffect钩子确保DOM渲染完成后再初始化图表，或者更省心的方式是用适配React的react-chartjs-2库。

给你完整的可运行示例 #

第一步：安装依赖（如果还没装的话）

npm install chart.js react-chartjs-2

第二步：完整的QueueDisplay组件代码

import React from 'react';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';

// 注册Chart.js必需的核心组件，不然会报错
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const QueueDisplay = () => {
  // 图表配置项
  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '队列数据柱状图',
      },
    },
    scales: {
      y: {
        beginAtZero: true, // Y轴从0开始，更直观展示数量
      },
    },
  };

  // 图表数据
  const chartData = {
    labels: ['队列1', '队列2', '队列3', '队列4', '队列5'],
    datasets: [
      {
        label: '待处理任务数',
        data: [12, 19, 3, 5, 2],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
        borderColor: 'rgba(54, 162, 235, 1)',
        borderWidth: 1,
      },
    ],
  };

  return (
    <div>
      <h1>QueueDisplay</h1>
      {/* 用react-chartjs-2的Bar组件，无需手动操作DOM */}
      <Bar options={chartOptions} data={chartData} />
    </div>
  );
};

export default QueueDisplay;

几个关键说明 #

1. 组件注册：Chart.js v3+需要手动注册用到的组件（比如缩放、柱状图元素等），不然会出现功能缺失的报错
2. react-chartjs-2的优势：它封装了原生Chart.js，完全贴合React的组件式写法，不用手动获取canvas元素，更适合新手
3. 如果想用原生Chart.js：可以用useEffect钩子在组件挂载后初始化，示例代码如下（可以替换上面的Bar组件部分）：

import { useEffect } from 'react';

// 在组件内部添加这个useEffect
useEffect(() => {
  const ctx = document.getElementById('myChart');
  new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: chartOptions,
  });
}, []); // 空数组确保只在组件挂载时执行一次

// 然后在return里添加canvas标签
<canvas id="myChart" width="400" height="400"></canvas>

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