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

Question

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

我尝试过的代码，

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

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

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

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

工作示例：

编辑：尝试添加borderColor : gradientFill，但这也不起作用。

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

请帮我把颜色改成渐变色。

Answer 1

由于您的useEffect 钩子，您的渐变不适用，在此钩子中，您使用formatData 函数再次设置数据，但只传递数据而不传递canvasGradient。所以你也需要通过它。

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

编辑：

更新为不同的方法，在您的 formatData 函数中为 backgroundColor 使用三元运算符来检查如果不采用当前 backgroundColor 是否给出了画布渐变

Answer 2

您可以在数据集中使用borderColor : 'Red'。见下面代码

datasets: [
      {
        pointBorderWidth: 10,
        pointHoverRadius: 10,
        pointHoverBorderWidth: 1,
        pointRadius: 3,
        fill: "start",
        backgroundColor: gradientFill,
        borderWidth: 4,
        borderColor : 'Red',   //  New line added
        data
      }
    ]