如何在chart.js中应用渐变颜色？

我正在使用 Chart.js 库制作折线图，在这里我想将线条的颜色更改为渐变颜色。

我试过的代码，

  const gradientFill = ctx.createLinearGradient(500, 0, 100, 0);
  gradientFill.addColorStop(0, "#80b6f4");
  gradientFill.addColorStop(1, "#f49080");

并将其添加到数据集中，例如，

datasets: [
  {
    .
    .
    .
    .
    backgroundColor: gradientFill,
    .
    .
  }
]

但我看不到变化，仍然只显示一些灰色线而不是渐变。

工作示例：

Edit:尝试添加borderColor : gradientFill但这也行不通。

要求：要求是我需要有一条类似的渐变线https://i.stack.imgur.com/lKGqT.png https://i.stack.imgur.com/lKGqT.png

请帮我将颜色更改为渐变颜色。

您的梯度不适用，因为您useEffect钩子，在这个钩子中，您可以使用您的formatData函数，但只传递数据，没有canvasGradient。所以你也需要通过它。

请参阅第 108 行和第 109 行注释掉它工作正常，因此您需要在那里重新创建渐变或在更高级别上创建它，这样您只需创建一次。https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx https://codesandbox.io/s/chart-js-react-typescript-forked-dxlj7?file=/src/App.tsx

Edit:

更新为不同的方法，在你的formatData背景颜色的函数使用三元运算符检查是否给出了画布渐变（如果不采用当前背景颜色）