React ChartJS：背景渐变未出现

Question

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

我实现了canvas的createLinearGradient()没有效果。我还能做错什么吗？ 编辑：我添加了所有导入，包括填充器。这样还是不行。

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);

时，我的渐变变得可见。有人可以解释一下这个值是如何运作的吗？

Answer 1

200 和 500 指的是图表内的像素 x/y 位置。它可以让您决定希望渐变在哪个轴位置开始/停止。以下文档告诉您每个值背后的含义：

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient

我的线性渐变从顶部的颜色到底部的透明。这是我的实现：

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

在此示例中，我使用 context.chart.chartArea.height 来告诉我画布的高度，并将其连接到顶部，以便渐变覆盖整个背景（即超高值将具有明亮的颜色）而低的填充物将是透明的）。