折线图厚度与填充样式无关

Question

我正在使用

react-chartjs-2

，版本：

^5.2.0

正如您从图像中看到的，我正在尝试在折线图上应用渐变填充。

但是渐变样式也应用于线条本身。

有没有办法将线条的样式和渐变填充效果分开？

我有：

我想要实现的目标：

增加线条的粗细，同时保持背景的渐变填充。

相关代码：

function getGradient(ctx, chartArea) {
  let gradient = ctx.createLinearGradient(
    0,
    chartArea.bottom,
    0,
    chartArea.top,
  );
  gradient.addColorStop(0.9, "#5A9EF566");
  gradient.addColorStop(0.4, "#5A9EF52F");
  gradient.addColorStop(0, "#5A9EF500");
  return gradient;
}

const apiRespnose = [
    {
      timestamp: "08:24",
      orderCount: "95",
    },
    {
      timestamp: "08:25",
      orderCount: "107",
    },
    {
      timestamp: "08:26",
      orderCount: "105",
    }];

const data = {
  labels: apiRespnose.map((e) => e.timestamp),
  datasets: [
    {
      label: "No of orders",
      data: apiRespnose.map((e) => Number(e.orderCount)),
      borderColor: "#5A9EF566",
      pointStyle: "circle",
      fill: true,
      backgroundColor: function (context) {
        const chart = context.chart;
        const { ctx, chartArea } = chart;
        if (!chartArea) return;
        return getGradient(ctx, chartArea);
      },
      borderWidth: 2,
    },
  ],
}

<LineChart data={data} />

Answer 1

如果您将

borderColor

设置为静态颜色，那么您的线条将是一种单色，但填充仍然是渐变