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

Posted 2023-02-25

【中文标题】带有 nextjs 的 G2Plot。堆积图不起作用

【英文标题】：G2Plot with nextjs. Stacked graph not working

【发布时间】：2020-11-27 09:21:06

【问题描述】：

我想使用 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"),
    
      s-s-r: false,
    
  );
  return (
    <>
      <StackedBar />
    </>
  );
;
export default Main;

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

【参考方案1】：

事实证明我必须安装@antv/g2plot。在此之前，我有@antv/g2。安装包后一切工作完美。

【讨论】：

可能有您的示例代码或回购？我不知道如何在 nextjs 中做到这一点。