如何在Next.js中结合ChartJS与react-chartjs-2使用图片作为pointStyle？

核心问题分析 #

1. ReferenceError: Image is not defined：Next.js默认服务端渲染时无浏览器window对象，Image是浏览器专属API，必须在客户端环境执行相关代码。
2. next/image组件无法使用：Chart.js的pointStyle仅接受原生HTMLImageElement，而next/image是React组件（含优化逻辑，并非直接的img元素）；点击触发hooks错误是因为组件渲染时状态/Hooks执行顺序不稳定。

具体解决方法 #

方法1：客户端组件+异步加载图片 #

在Next.js 13的App Router中，先标记组件为客户端组件，再通过useEffect异步加载图片，确保图片加载完成后再初始化图表。

'use client';

import { useEffect, useState } from 'react';
import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

// 注册Chart.js所有必需模块
Chart.register(...registerables);

export default function CustomImagePointChart() {
  const [chartData, setChartData] = useState(null);

  useEffect(() => {
    // 创建原生Image元素（仅在浏览器环境执行）
    const customPointImage = new Image();
    // 图片路径指向public目录下的资源
    customPointImage.src = '/custom-point.png';

    // 图片加载完成后初始化图表数据
    customPointImage.onload = () => {
      setChartData({
        labels: ['1月', '2月', '3月', '4月', '5月'],
        datasets: [
          {
            label: '业务数据',
            data: [12, 28, 18, 35, 22],
            pointStyle: customPointImage,
            pointRadius: 20, // 调整大小适配图片
            pointHoverRadius: 25,
            borderColor: '#2563eb',
            backgroundColor: '#dbeafe',
          },
        ],
      });
    };

    // 清理函数：避免内存泄漏
    return () => {
      customPointImage.src = '';
    };
  }, []);

  // 加载状态占位
  if (!chartData) return <div>图表加载中...</div>;

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

方法2：使用Base64图片（无需异步加载） #

将图片转换为Base64字符串，直接通过url()传递给pointStyle，适合小体积图标类图片。

'use client';

import { Line } from 'react-chartjs-2';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

export default function Base64PointChart() {
  // 替换为你的图片Base64字符串
  const pointImageBase64 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA...';

  const chartData = {
    labels: ['1月', '2月', '3月', '4月', '5月'],
    datasets: [
      {
        label: '业务数据',
        data: [12, 28, 18, 35, 22],
        pointStyle: `url(${pointImageBase64})`,
        pointRadius: 20,
        borderColor: '#2563eb',
        backgroundColor: '#dbeafe',
      },
    ],
  };

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

补充错误处理 #

为避免图片加载失败导致图表异常，可添加错误回调：

customPointImage.onerror = () => {
  console.error('自定义点图片加载失败');
  // 降级为默认样式
  setChartData({
    // ...其他配置
    datasets: [{ pointStyle: 'circle', pointRadius: 10 }]
  });
};

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