尝试为折线图创建渐变背景。我试图实施的解决方案不起作用。见屏幕截图：

我实现了canvas的codeLinearGradient（），但没有用。我还能做错什么编辑：我添加了所有导入，包括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",
    dataLineChart,
    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;

编辑：当将const gradient = ctx.createLinearGradient(0, 0, 0, 200);更改为const gradient = ctx.createLinearGradient(0, 0, 0, 500);时，我的渐变变得可见。有人能解释一下这个值是如何工作的吗？