React Chart.js折线图背景渐变不显示及参数作用疑问

问题背景 #

我尝试为React Chart.js折线图创建背景渐变，但最初的方案未生效。使用canvas的createLinearGradient()方法时，设置参数(0, 0, 0, 200)看不到渐变效果，将最后一个参数改为500后，渐变正常显示。已导入Filler等所有必要模块，相关代码如下：

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

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
  Filler
);

function Linechart() {
  const labels = ["January", "February", "March", "April", "May", "June"];

  const dataLineChart = {
    labels: labels,
    datasets: [
      {
        backgroundColor: (context: ScriptableContext<"line">) => {
          const ctx = context.chart.ctx;
          const gradient = ctx.createLinearGradient(0, 0, 0, 200); // 原无效参数
          gradient.addColorStop(0, "rgba(250,174,50,1)");
          gradient.addColorStop(1, "rgba(250,174,50,0)");
          return gradient;
        },
        label: "UST",
        fill: "start",
        borderColor: "#8E95DF",
        data: [0, 10, 5, 2, 20, 30, 45],
      },
    ],
  };

  const configLineChart = {
    type: "line",
    elements: {
      line: {
        tension: 0.35,
      },
    },
    plugins: {
      filler: {
        propagate: false,
      },
    },
  };

  return (
    <div>
      <div className="px-5 py-3">Fund Profits</div>
      <Line data={dataLineChart} options={configLineChart}></Line>
    </div>
  );
}

export default Linechart;

参数作用说明 #

createLinearGradient(x0, y0, x1, y1)是Canvas API的核心方法，四个参数定义了渐变的起始与结束坐标：

• x0、y0：渐变的起始点（Canvas坐标系以左上角为原点，x轴向右递增，y轴向下递增）
• x1、y1：渐变的结束点

你的场景中设置x0=x1=0，意味着渐变是垂直方向的（从顶部向底部延伸）：

• 原参数(0,0,0,200)表示渐变仅在垂直方向0到200像素的范围内生效，但你的图表实际高度超过了200像素，导致渐变区域只占图表顶部极小一部分，肉眼几乎不可见；
• 修改为(0,0,0,500)后，渐变范围覆盖了图表的有效高度，因此能看到完整的从实色到透明的渐变效果。

优化建议 #

为了适配不同尺寸的图表，避免写固定像素值，可以直接使用图表画布的实际高度来定义渐变范围，代码如下：

const gradient = ctx.createLinearGradient(0, 0, 0, context.chart.height);

内容的提问来源于stack exchange，提问作者Furkan Öztürk