Reagieren Sie beim ersten Rendern spaltenförmig auf Recharts

Question

import React, { Fragment, useCallback } from "react";
importieren {
  Balkendiagramm,
  Bar,
  ResponsiveContainer,
  Zelle,
  Etikettenliste,
  Y-Achse,
} von „recharts“;
import {fontSizes, textColors} aus „styles/theme“;

const CustomLabelImage = (props: any) => {
  const { x, y, value } = props;
  zurückkehren (
    <Fragment key={`${Math.random()}`}>
      <Bild
        x={+x! - 5}
        clipPath={"circle(40%)"}
        y={y - 105}
        Breite={55}
        Höhe={55}
        href={Wert}
      />
    </Fragment>
  );
};
const CustomLabel = (props: any) => {
  const { x, y, value } = props;
  zurückkehren (
    <Fragment key={`${Math.random()}`}>
      <Text
        x={x}
        y={y}
        className="grotesk"
        Stil={{
          Schriftgewicht: 600,
          Schriftartgröße: Schriftartgrößen.f20,
        }}
        dx={10}
        dy={-10}
        textAnchor="top"
        fill={textColors.sceptreBlue}
      >
        {Wert}
      </text>
    </Fragment>
  );
};

const CustomLabelName = (props: any) => {
  const { x, y, value } = props;
  zurückkehren (
    <Fragment key={`${Math.random()}`}>
      <Text
        x={x}
        y={y}
        className="grotesk"
        Stil={{
          Schriftgewicht: 300,
          Schriftartgröße: Schriftartgrößen.f10,
        }}
        dx={-4}
        dy={-35}
        textAnchor="top"
        fill={textColors.sceptreBlue}
      >
        {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
      </text>
    </Fragment>
  );
};

Exportieren Sie die Standardfunktion BarChartRedList({
  Daten,
  Farbe,
}: {
  Daten: { time: string; verloren: Nummer; Avatar?: string }[];
  withLabel?: boolean;
  withAvatar?: boolean;
  Farbe?: string;
}) {
  const renderItems = useCallback(() => {
    zurückkehren (
      <Fragment>
        {data.map((item, index) => {
          zurückkehren (
            <Fragment key={`${item.lost}_${index}`}>
              <LabelList
                dataKey="avatar"
                position="oben"
                key={`cell3-${index}`}
                width={100}
                offset={10}
                content={<CustomLabelImage />}
              />
              <LabelList
                dataKey="time"
                key={`cell2-${index}`}
                position="oben"
                offset={10}
                width={100}
                content={<CustomLabelName />}/>
              <LabelList
                dataKey="verloren"
                position="oben"
                key={`cell1-${index}`}
                offset={5}
                width={"100px"}
                content={<CustomLabel />}
              />
              <Zelle
                Radius={8}
                key={`cell-${index}`}
                Breite={40}
                Offset={20}
                fill="url(#barGradient)"
              />
            </Fragment>
          );
        })}
      </Fragment>
    );
  }, [Daten]);

  zurückkehren (
    <div>
      <ResponsiveContainer height={350}>
        <BarChart
          Breite={500}
          Höhe={200}
          data={data}
          Marge={{
            oben: 120,
            rechts: 0,
            links: 0,
            unten: 20,
          }}
        >
          <defs>
            <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={color} stopOpacity={1} />
              <stop offset="95%" stopColor={color} stopOpacity={0.2} />
            </linearGradient>
          </defs>
          <Bar yAxisId="left" dataKey="lost">
            {renderItems()}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

在窗口加载后的第一次点击按钮之后，

我尝试使用图片渲染柱状图，但结果并不如我预期的那样.在窗口加载后的第一次渲染中,图片和文本不可见,但在进行一些操作后它们会变得可见.我无法解决这个问题.请帮我找出如何解决这个问题.

我的包版本是:"recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。

< /p>

Answer 1

经过一些研究，我找到了解决方案。

<Bar 
   yAxisId="left"
   dataKey="lost"
   isAnimationActive={false} //added this
>
  {renderItems()}
</Bar>