reactjs 在React中使用ChartJS将图像作为点样式

hrysbysz  于 2023-01-08  发布在  React
关注(0)|答案(1)|浏览(144)

我正在React/NextJS中使用chartjs/react-chartjs-s绘制一些图。我想为pointStyle使用一个图像。在纯JavaScript中,可以使用const i = new Image()创建一个图像,并在ChartJS中用作pointStyle
在React中,我得到一个错误ReferenceError: Image is not defined。如果我尝试从next/image导入Image并使用它,那么图像在初始渲染时不会出现(像here,有趣的是,它 * 可以 * 使用new Image()),如果我单击图表上的一个数据,我得到一个错误Error: Rendered more hooks than during the previous render.

    • TLDR:有人知道如何使用Next.js、ChartJS和react-chartjs-2将图像/图标用作pointStyle吗?**谢谢!

我正在使用:

  1. react版本18.2.0
  2. react-dom版本18.2.0
  3. next版本13.0.05
  4. chart.js版本4.1.1
  5. react-chartjs-2版本5.1.0
o7jaxewo

o7jaxewo1#

溶液:
new Image()引用DOM,但是由于Next使用SSR,因此必须利用useRefuseStateuseEffect钩子来避免尝试访问DOM的问题。

import React, { useEffect, useRef, useState } from "react";
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
} from "chart.js";
import { Radar } from "../node_modules/react-chartjs-2/dist";

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend
);

function App() {
  // useRef lets you reference a DOM object, persistent between renders
  const ref = useRef();
  const [onClient, setOnClient] = useState();
  
  // On first render, set onClient flag to true
  useEffect(() => {
    setOnClient(true);
  }, []);

  // On first render, set the current value of the ref to the image
  useEffect(() => {
    ref.current = new Image(25, 25);
    ref.current.src = "https://i.stack.imgur.com/gXQrT.png";
  }, []);

  const data = {
    labels: ["Business 1", "Business 2", "Business 3"],
    datasets: [
      {
        label: "Number of Businesses",
        data: [1300, 400, 160],
        backgroundColor: "rgba(255, 99, 132, 0.2)",
        borderColor: "rgba(255, 99, 132, 1)",
        borderWidth: 1,
        // Set the value of pointStyle to the ref value
        pointStyle: ref.current
      }
    ]
  };

  return (
    <div className="App">
      // Return the graph if rendering is happening on the client
      {onClient && <Radar data={data} />}

      <form>
        <input type="text" placeholder="Label" />
        <input type="text" placeholder="Dataset" />
        <button>Add Data</button>
      </form>
    </div>
  );
}

export default App;

相关问题