첫 번째 렌더링 시 React Recharts 열 형식

Question

"react"에서 React, { Fragment, useCallback } 가져오기;
수입 {
  막대 차트,
  술집,
  반응형컨테이너,
  셀,
  라벨리스트,
  Y축,
} "다시 차트"에서;
"스타일/테마"에서 {fontSizes, textColors }를 가져옵니다.

const CustomLabelImage = (props: any) => {
  const { x, y, 값 } = 소품;
  반품 (
    <조각 키={`${Math.random()}`}>
      <이미지
        x={+x! - 5}
        ClipPath={"원(40%)"}
        y={y - 105}
        너비={55}
        높이={55}
        href={값}
      />
    </조각>
  );
};
const CustomLabel = (props: any) => {
  const { x, y, 값 } = 소품;
  반품 (
    <조각 키={`${Math.random()}`}>
      <텍스트
        x={x}
        y={y}
        클래스명="그로테스크"
        스타일={{
          글꼴 무게: 600,
          글꼴 크기: 글꼴 크기.f20,
        }}
        dx={10}
        다이={-10}
        텍스트앵커="상단"
        채우기={textColors.sceptreBlue}
      >
        {값}
      </text>
    </조각>
  );
};

const CustomLabelName = (props: any) => {
  const { x, y, 값 } = 소품;
  반품 (
    <조각 키={`${Math.random()}`}>
      <텍스트
        x={x}
        y={y}
        클래스명="그로테스크"
        스타일={{
          글꼴 무게: 300,
          글꼴 크기: 글꼴 크기.f10,
        }}
        dx={-4}
        dy={-35}
        텍스트앵커="상단"
        채우기={textColors.sceptreBlue}
      >
        {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
      </text>
    </조각>
  );
};

기본 함수 BarChartRedList({
  데이터,
  색상,
}: {
  데이터: { 시간: 문자열; 분실: 번호; 아바타?: 문자열 }[];
  withLabel?: 부울;
  withAvatar?: 부울;
  색상?: 문자열;
}) {
  const renderItems = useCallback(() => {
    반품 (
      <조각>
        {data.map((항목, 색인) => {
          반품 (
            <조각 키={`${item.lost}_${index}`}>
              <라벨 목록
                데이터키="아바타"
                위치="상단"
                키={`cell3-${index}`}
                너비={100}
                오프셋={10}
                콘텐츠={<CustomLabelImage />}
              />
              <라벨 목록
                데이터키="시간"
                키={`cell2-${index}`}
                위치="상단"
                오프셋={10}
                너비={100}
                콘텐츠={<CustomLabelName />}/>
              <라벨 목록
                데이터키="분실"
                위치="상단"
                키={`cell1-${index}`}
                오프셋={5}
                너비={"100px"}
                콘텐츠={<CustomLabel />}
              />
              <셀
                반경={8}
                키={`cell-${index}`}
                너비={40}
                오프셋={20}
                fill="url(#barGradient)"
              />
            </조각>
          );
        })}
      </조각>
    );
  }, [데이터]);

  반품 (
    <div>
      <ResponsiveContainer 높이={350}>
        <막대형 차트
          너비={500}
          높이={200}
          데이터={데이터}
          여백={{
            상단: 120,
            오른쪽: 0,
            왼쪽: 0,
            하단: 20,
          }}
        >
          <정의>
            <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} />
            </선형 그래디언트>
          </defs>
          <Bar yAxisId="left" dataKey="lost">
            {렌더아이템()}
          </바>
        </막대형 차트>
      </반응형 컨테이너>
    </div>
  );
}

지금은 이 웹사이트에서 사용 가능한 사진이 없습니다.

窗口加载后의第一次渲染中，图 Images 와文本不可见 ， 但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找何何解决这个问题.

나의 집은 특별합니다是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。

< /p>

Answer 1

몇 가지 조사 끝에 해결책을 찾았습니다.

으아악