Lajur React Recharts pada paparan pertama

Question

import React, { Fragment, useCallback } daripada "react";
import {
  Carta bar,
  bar,
  Bekas Responsif,
  sel,
  Senarai Label,
  YAxis,
} daripada "carta semula";
import { fontSizes, textColors } daripada "gaya/tema";

const CustomLabelImage = (props: any) => {
  const { x, y, nilai } = props;
  kembali (
    <Kunci serpihan={`${Math.random()}`}>
      <imej
        x={+x! - 5}
        clipPath={"bulatan(40%)"}
        y={y - 105}
        lebar={55}
        ketinggian={55}
        href={value}
      />
    </Fragment>
  );
};
const CustomLabel = (props: any) => {
  const { x, y, nilai } = props;
  kembali (
    <Kunci serpihan={`${Math.random()}`}>
      <teks
        x={x}
        y={y}
        className="grotesk"
        gaya={{
          fonBerat: 600,
          fontSizes: fontSizes.f20,
        }}
        dx={10}
        dy={-10}
        textAnchor="atas"
        fill={textColors.sceptreBlue}
      >
        {value}
      </text>
    </Fragment>
  );
};

const CustomLabelName = (props: any) => {
  const { x, y, nilai } = props;
  kembali (
    <Kunci serpihan={`${Math.random()}`}>
      <teks
        x={x}
        y={y}
        className="grotesk"
        gaya={{
          fonBerat: 300,
          fontSizes: fontSizes.f10,
        }}
        dx={-4}
        dy={-35}
        textAnchor="atas"
        fill={textColors.sceptreBlue}
      >
        {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
      </text>
    </Fragment>
  );
};

eksport fungsi lalai BarChartRedList({
  data,
  warna,
}: {
  data: { masa: rentetan; hilang: nombor; avatar?: rentetan }[];
  withLabel?: boolean;
  withAvatar?: boolean;
  warna?: rentetan;
}) {
  const renderItems = useCallback(() => {
    kembali (
      <Pecahan>
        {data.map((item, indeks) => {
          kembali (
            <Kunci serpihan={`${item.lost}_${index}`}>
              <Senarai Label
                dataKey="avatar"
                kedudukan="atas"
                key={`cell3-${index}`}
                lebar={100}
                offset={10}
                content={<CustomLabelImage />}
              />
              <LabelList
                dataKey="masa"
                key={`cell2-${index}`}
                kedudukan="atas"
                offset={10}
                lebar={100}
                content={<CustomLabelName />}/>
              <LabelList
                dataKey="hilang"
                kedudukan="atas"
                key={`cell1-${index}`}
                offset={5}
                lebar={"100px"}
                content={<CustomLabel />}
              />
              <Sel
                jejari={8}
                kunci={`sel-${indeks}`}
                lebar={40}
                offset={20}
                fill="url(#barGradient)"
              />
            </Fragment>
          );
        })}
      </Fragment>
    );
  }, [data]);

  kembali (
    <div>
      <Ketinggian Bekas Responsif={350}>
        <BarChart
          lebar={500}
          ketinggian={200}
          data={data}
          margin={{
            atas: 120,
            kanan: 0,
            kiri: 0,
            bawah: 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

Selepas beberapa kajian saya jumpa penyelesaiannya.

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