React Recharts の最初のレンダリング時の円柱状

Question

import React, { Fragment, useCallback } from "react";
輸入 {
  棒グラフ、
  バー、
  レスポンシブコンテナ、
  細胞、
  ラベルリスト、
  YA軸、
"recharts" から;
「スタイル/テーマ」から { 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}
        className="グロテスク"
        スタイル={{
          フォントウェイト: 600、
          フォントサイズ: fontSizes.f20、
        }}
        dx={10}
        dy={-10}
        textAnchor="トップ"
        fill={textColors.sceptreBlue}
      >
        {価値}
      </テキスト>
    </フラグメント>
  );
};

const CustomLabelName = (props: any) => {
  const { x, y, 値 } = 小道具;
  戻る （
    <フラグメントキー={`${Math.random()}`}>
      <テキスト
        x={x}
        y={y}
        className="グロテスク"
        スタイル={{
          フォントウェイト: 300、
          フォントサイズ: fontSizes.f10、
        }}
        dx={-4}
        dy={-35}
        textAnchor="トップ"
        fill={textColors.sceptreBlue}
      >
        {value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
      </テキスト>
    </フラグメント>
  );
};

デフォルト関数をエクスポート BarChartRedList({
  データ、
  色、
}: {
  データ: { 時間: 文字列;紛失: 番号;アバター?: 文字列 }[];
  withLabel?: ブール値;
  withAvatar?: ブール値;
  色?: 文字列;
}) {
  const renderItems = useCallback(() => {
    戻る （
      ＜フラグメント＞
        {data.map((アイテム, インデックス) => {
          戻る （
            <フラグメントキー={`${item.lost}_${index}`}>
              <ラベルリスト
                dataKey="アバター"
                位置="トップ"
                key={`cell3-${index}`}
                幅={100}
                オフセット={10}
                content={<CustomLabelImage />}
              />
              <ラベルリスト
                データキー = "時間"
                key={`cell2-${index}`}
                位置="トップ"
                オフセット={10}
                幅={100}
                content={<カスタムラベル名 />}/>
              <ラベルリスト
                データキー = "失われた"
                位置="トップ"
                key={`cell1-${index}`}
                オフセット={5}
                width={"100ピクセル"}
                content={<カスタムラベル />}
              />
              <セル
                半径={8}
                key={`セル-${インデックス}`}
                幅={40}
                オフセット={20}
                fill="url(#barGradient)"
              />
            </フラグメント>
          );
        })}
      </フラグメント>
    );
  }、 [データ]）;

  戻る （
    <div>
      <レスポンシブコンテナの高さ={350}>
        <棒グラフ
          幅={500}
          身長={200}
          データ={データ}
          マージン={{
            トップ：120、
            右: 0、
            左: 0、
            下: 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()}
          </バー>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}

ソケットのロード後の最初のポイント選択の後、

私はカラム状の図を染付けた写真を使用しましたが、結果は期待どおりではありませんでした。

我のパッケージ版は、この問題を解決できません。ある："recharts": "^2.4.3"、"next": "13.4.7"、"react": "18.2.0"。

< /p>

Answer 1

少し調べた結果、解決策が見つかりました。

リーリー