画布上下文中的 React-chartjs-2 渐变填充错误

Question

我有一个react-chart-js2组件，我试图在填充上制作渐变，但是我遇到了一些不同的打字稿错误，并且似乎无法让它工作。

该文档表示将 data 属性作为函数传递并引用画布，以便访问画布上下文以添加渐变。不幸的是，这不起作用。

这是文件的codesandbox：https://codesandbox.io/s/modest-bird-j2in8（文件LineChartGradient.tsx）

我遇到的错误围绕 Canvas Context 并将数据函数传递给 Chartjs 组件

数据

const data = (canvas: HTMLCanvasElement) => {
    const ctx = canvas.getContext("2d");
    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 {
      labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
      datasets: [
        {
          label: "First dataset",
          data: [33, 53, 85, 41, 44, 65],
          fill: "start",
          backgroundColor: "rgba(75,192,192,0.2)",
          borderColor: "rgba(75,192,192,1)"
        },
        {
          label: "Second dataset",
          data: [33, 25, 35, 51, 54, 76],
          fill: "start",
          borderColor: "#742774"
        }
      ]
    };
  };

成分

  return (
    <div>
      <Line data={data} options={options} />
    </div>
  );

错误#1

const gradient = ctx.createLinearGradient(0, 0, 0, 200);

打字稿说这个对象可能是 null，这很好我可以检查它是否存在，但这是我的第一个线索，画布元素没有被传递

错误#2

<Line data={data} options={options} />

类型 '(canvas: HTMLCanvasElement) => { labels: string[]; 中缺少属性“datasets”；数据集：

当将数据作为函数传递时，我会收到此错误，但是如果我只是将 data 函数返回的对象放入 data 属性中，则图表会呈现良好（请参阅 LineChart.tsx）。

在react-chartjs-2中访问画布上下文以添加渐变填充的正确方法是什么？

Answer 1

This is because you dont pass any canvas to the data function when you call it in

<Line data={data} options={options} />

But the canvas is also not availabale here. If you want to make a custom gradient you will need to apply a scriptable option for the backgroundColor like so:

const data = () => {
  return {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [{
      label: "First dataset",
      data: [33, 53, 85, 41, 44, 65],
      fill: "start",
      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;
      },
      borderColor: "rgba(75,192,192,1)"
    }]
  };
};

Also make sure to call the function in your data field so your html becomes this:

<Line data={data()} options={options} />

Working Codesandbox: https://codesandbox.io/s/interesting-faraday-204ugi?file=/src/LineChartGradient.tsx