reactjs - 带有 nextjs 的 G2Plot。堆积图不起作用

Question

我想使用 G2plot 创建一个堆叠图。因此，我必须为组件创建 2 个文件。另一个用于将使用动态 I 调用组件的页面

import React, { useEffect, useRef } from "react";
import { Bar } from "@antv/g2plot";

const data = [
  {
    year: "1991",
    value: 3,
    type: "Lon",
  },
  {
    year: "1992",
    value: 4,
    type: "Lon",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Lon",
  },
  {
    year: "1994",
    value: 5,
    type: "Lon",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Lon",
  },
  {
    year: "1996",
    value: 6,
    type: "Lon",
  },
  {
    year: "1997",
    value: 7,
    type: "Lon",
  },
  {
    year: "1998",
    value: 9,
    type: "Lon",
  },
  {
    year: "1999",
    value: 13,
    type: "Lon",
  },
  {
    year: "1991",
    value: 3,
    type: "Bor",
  },
  {
    year: "1992",
    value: 4,
    type: "Bor",
  },
  {
    year: "1993",
    value: 3.5,
    type: "Bor",
  },
  {
    year: "1994",
    value: 5,
    type: "Bor",
  },
  {
    year: "1995",
    value: 4.9,
    type: "Bor",
  },
  {
    year: "1996",
    value: 6,
    type: "Bor",
  },
  {
    year: "1997",
    value: 7,
    type: "Bor",
  },
  {
    year: "1998",
    value: 9,
    type: "Bor",
  },
  {
    year: "1999",
    value: 13,
    type: "Bor",
  },
];

const Main = (
  {
    // data,
    // xAxis = "xAxis",
    // yAxis = "yAxis",
    // color = "#0D0E68",
  }
) => {
  const containerRef = useRef(null);
  let stackedBarPlot;
  useEffect(() => {
    stackedBarPlot = new Bar(containerRef.current, {
      data: data.reverse(),
      isStack: true,
      xField: "value",
      yField: "year",
      seriesField: "type",
      autoFit: true,
      label: {
        position: "left", // 'left', 'middle', 'right'
        layout: [
          { type: "interval-adjust-position" },
          { type: "interval-hide-overlap" },
          { type: "adjust-color" },
        ],
      },
    });
  }, []);

  useEffect(() => {
    stackedBarPlot.render();
  }, []);
  return (
    <>
      <div ref={containerRef}></div>
    </>
  );
};

export default Main;

将动态导入的文件

import React from "react";
import dynamic from "next/dynamic";
const Main = () => {
  const StackedBar = dynamic(
    () => import("../../../src/Components/StackedBar"),
    {
      ssr: false,
    }
  );
  return (
    <>
      <StackedBar />
    </>
  );
};
export default Main;

PS。我正在使用 nextjs 10 这是我预期行为的代码框 https://codesandbox.io/s/optimistic-banach-up3i0?file=/index.js

Answer 1

原来我必须安装@antv/g2plot。在此之前，我有@antv/g2。安装软件包后，每项工作都很完美。