使用 react-chartjs-2 创建对折线图的引用

Question

我正在尝试为我正在使用 chart.js 和 react-chartjs-2 构建的图表创建一个引用。

这是我尝试创建指定类型的引用的行：const chartRef = useRef<Line>(null);

这是我得到的错误：

'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?

我发现了以下 documentation 但由于我是 TypeScript 的新手，我还不知道如何解释它。这是我使用的完整代码：

import { Line } from "react-chartjs-2";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { useRef } from "react";

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

export const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "First dataset",
      data: [33, 53, 85, 41, 44, 65],
      fill: true,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    },
    {
      label: "Second dataset",
      data: [33, 25, 35, 51, 54, 76],
      fill: false,
      borderColor: "#742774"
    }
  ]
};

export default function App() {
  const chartRef = useRef<Line>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

你能给我指出正确的方向吗？谢谢！

Answer 1

我不太熟悉 ChartJS，但是当我将您现有的代码从 const chartRef = useRef<Line>(null); 更改为 const chartRef = useRef<'line'>(null);（根据文档）时，linter 让我更好地了解了什么需要修复（在 ref）。

你的情况：

export function App() {
  const chartRef = useRef<ChartJS<"line", number[], string>>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Working CodeSandbox

使用 react-chartjs-2 创建对折线图的引用

Creating a ref to Line chart using react-chartjs-2

javascript

reactjs

typescript