G2Plot具有nextjs。堆叠图不工作

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。安装包装后，每件工作都很完美。