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

4si2a6ki 于 2023-01-20 发布在 Chart.js

关注(0)|答案(3)|浏览(158)

我有一个React图js2组件，我试图使一个梯度上的填充，但我得到了一些不同的打字错误，似乎不能让它工作。
文档中说要把数据属性作为一个函数传递，并引用画布，以便访问画布上下文来添加渐变。不幸的是，这并不起作用。
下面是这些文件的代码：https://codesandbox.io/s/modest-bird-j2in8（文件线图渐变. tsx）
我得到的错误与CanvasContext和向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);

Typescript表示此对象可能为null *，这很好，我可以检查它是否存在，但这是我的第一个线索，表明画布元素未被传递

错误#2

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

类型"（画布：）"中缺少属性"datasets"HTML画布元素）=〉{标签：字符串[];数据集：*

当把数据作为函数传递时，我会得到这个错误，但是如果我只是把data函数返回的对象放到data prop中，图形就会呈现得很好（参见LineChart.tsx）。
在react-chartjs-2中访问画布上下文以添加渐变填充的正确方法是什么？

chart.js

来源：https://stackoverflow.com/questions/71087466/react-chartjs-2-gradient-fill-error-on-canvas-context

3条答案

按热度按时间

11dmarpk1#

这是因为在调用data函数时，没有向其传递任何画布

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

但是画布在这里也是不可用的。如果你想做一个自定义的渐变，你需要为backgroundColor应用一个脚本选项，如下所示：

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)"
    }]
  };
};

同时确保在数据字段中调用该函数，使html变为：

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

工作代码和框：https://codesandbox.io/s/interesting-faraday-204ugi?file=/src/LineChartGradient.tsx

赞(0）回复(0）举报 2023-01-20

6uxekuva2#

如果有人需要React解决方案，这里的解决方案可能会产生额外的错误，如 “createLinearGradient不是函数” 或 “document.getElementById（）返回null”，因为它在加载DOM之前查找图表ID。
一个干净的解决方案是将图表创建为功能组件，并确保注册了所有需要的ChartJS资产。

1.确保ChartJS已正确初始化和注册

import { Line } from 'react-chartjs-2' import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler, ScriptableContext } from "chart.js";

ChartJS.register(CategoryScale,LinearScale,PointElement,LineElement,Title,Tooltip,Legend,Filler);

2.使用ScriptableContext添加渐变

backgroundColor: (context: ScriptableContext<"line">) => { const ctx = context.chart.ctx; const gradient = ctx.createLinearGradient(0, 0, 0, 200); gradient.addColorStop(0, "rgba(238,174,202,1)"); gradient.addColorStop(1, "rgba(238,174,202,0)"); return gradient; },

实时代码打印，带折线图渐变enter link description here

赞(0）回复(0）举报 2023-01-20

r7s23pms3#

所以看起来你的代码有很多错误，我试图通过解决第二个问题来帮助你，data应该是json而不是函数，所以要解决这个问题，你应该在传递函数之前执行它，如下所示：

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

export default function Chart(){
    return (
    <div>
    {
    /****
    pass data() not data
    ****/
    }
      <Line data={data()} options={options} />
    </div>
  );
  }

赞(0）回复(0）举报 2023-01-20

我来回答

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

3条答案

相关问题

热门标签

最新问答