如何在react-chart-js2折线图下方添加渐变色彩（无插件实现）

无需额外插件，直接利用Chart.js原生的渐变API即可实现。核心是通过画布上下文创建线性渐变，再将其设置为折线图数据集的背景填充色。

实现步骤 #

1. 导入依赖并注册Chart.js组件

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

// 注册Chart.js所需的所有组件
Chart.register(...registerables);

2. 编写渐变创建函数
   该函数通过画布上下文创建线性渐变，可自定义渐变的颜色、透明度和方向：

const createGradient = (ctx) => {
  // 参数：x起始坐标, y起始坐标, x结束坐标, y结束坐标
  const gradient = ctx.createLinearGradient(0, 0, 0, 400);
  // 渐变节点：位置(0-1) + 颜色(支持rgba设置透明度)
  gradient.addColorStop(0, 'rgba(54, 162, 235, 0.5)');
  gradient.addColorStop(1, 'rgba(54, 162, 235, 0)');
  return gradient;
};

3. 配置图表数据与选项
   在数据集里开启填充，并将渐变设置为背景色：

const chartData = {
  labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  datasets: [
    {
      label: '业务数据',
      data: [65, 59, 80, 81, 56, 55],
      borderColor: 'rgb(54, 162, 235)',
      tension: 0.4, // 折线平滑度
      fill: true, // 必须开启填充才能显示渐变背景
      backgroundColor: (context) => {
        // 通过上下文获取画布实例，创建渐变
        return createGradient(context.chart.ctx);
      },
    },
  ],
};

const chartOptions = {
  scales: {
    y: {
      beginAtZero: true,
    },
  },
};

4. 渲染折线图组件

export default function GradientLineChart() {
  return <Line data={chartData} options={chartOptions} />;
}

自定义说明 #

• 调整createLinearGradient的坐标参数可改变渐变方向（如水平渐变可设置(0,0,400,0)）
• 修改addColorStop的颜色值和透明度，能生成不同的渐变效果
• 若需多个数据集的渐变，可为每个数据集单独配置渐变函数

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