如何在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

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

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

Answer 2

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

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

编辑：

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

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

How to apply gradient color in chart.js?

javascript

css

typescript

reactjs

chart.js