Next.js中使用react-chart.js如何为图表边框添加渐变效果

Next.js环境下折线渐变失效核心是踩了两个框架默认特性的坑：

• Next.js 13+ App Router 下组件默认是服务端组件，运行环境没有浏览器端的canvas API，你之前纯React环境写的渐变创建逻辑在服务端执行会静默失败，最终回退为你配置的固定纯色边框
• Canvas渐变必须绑定实际渲染的canvas上下文才能生效，在组件初始化阶段静态创建的渐变对象和实际渲染的Chart画布不匹配，无法正常绘制

1. 若使用Next.js 13+ App Router，组件文件最顶部必须添加'use client'指令，标记组件为客户端组件，允许调用浏览器相关API
2. 不要将borderColor写死为固定色值，利用Chart.js的可脚本化配置能力，在回调中拿到Chart实例对应的canvas上下文后动态生成渐变，该回调只会在客户端执行，天然适配SSR场景
3. 可按需调整渐变方向、色值匹配目标视觉效果

'use client' // App Router下必须添加，Pages Router可省略该行
import { ChartProps } from "./Chart.props";
import styles from "./Chart.module.css";
import React, { useMemo } from 'react';

import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ScriptableContext, } from "chart.js";
import { Line } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement);

import { optionsChart } from "./ChartConfig.js";

export const CoinPriceChart = (props) => {
    const data = useMemo(() => ({
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
        datasets: [
            {
                data: [22, 45, 23, 41, 18, 11, 32, 31, 63, 54, 45, 49, 54, 36],
                pointRadius: 0,
                pointHoverRadius: 2,
                borderWidth: 2,
                // 动态生成渐变，自动适配画布尺寸变化
                borderColor: (context: ScriptableContext<'line'>) => {
                    const ctx = context.chart.ctx;
                    const { chartArea } = context.chart;
                    // 画布未初始化完成时返回兜底色，避免渲染报错
                    if (!chartArea) return "rgba(91,56,237,255)";
                    // 创建水平方向渐变，需要垂直渐变可替换为ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom)
                    const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
                    // 按目标效果配置渐变色标
                    gradient.addColorStop(0, '#5b38ed');
                    gradient.addColorStop(1, '#e938ce');
                    return gradient;
                }
            }
        ],
    }), [])

    return (
        <div
            className={styles.CardList}
            {...props}
        >
            <Line id="myChart" data={data} options={optionsChart}/>
        </div>
    );
};

• 该写法会自动响应画布尺寸变化重新计算渐变坐标，不会出现窗口缩放后渐变错位的问题
• 如果需要给折线下方填充区域加渐变，用完全相同的逻辑给dataset的backgroundColor配置回调即可
• 若使用Next.js Pages Router，无需添加'use client'指令，但同样需要把渐变生成逻辑放到borderColor回调中，不要在组件顶层手动创建canvas元素生成渐变，避免SSR阶段执行报错

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