首次渲染時，React Recharts柱狀
<p><br />></p>
<pre class="brush:php;toolbar:false;">從「react」匯入 React, { Fragment, useCallback };
進口 {
長條圖，
酒吧，
響應式容器，
細胞，
標籤列表，
Y軸，
} 來自「重新圖表」；
從「樣式/主題」匯入{ fontSizes，textColors }；
const CustomLabelImage = (props: 任意) => {
const { x, y, 值 } = 道具；
返回 （
<片段鍵={`${Math.random()}`}>
<影像
x={ x! - 5}
ClipPath={"圓(40%)"}
y = {y - 105}
寬度={55}
高度={55}
href={值}
>>
</片段>
）；
};
const CustomLabel = (props: 任意) => {
const { x, y, 值 } = 道具；
返回 （
<片段鍵={`${Math.random()}`}>
<文字
x={x}
y={y}
類別名稱=“格羅泰斯克”
風格={{
字體粗細：600，
字體大小：fontSizes.f20，
}}
dx={10}
dy={-10}
textAnchor=“頂部”
填充={textColors.sceptreBlue}
>
{價值}
</文字>
</片段>
）；
};
const CustomLabelName = (props: 任) => {
const { x, y, 值 } = 道具；
返回 （
<片段鍵={`${Math.random()}`}>
<文字
x={x}
y={y}
類別名稱=“格羅泰斯克”
風格={{
字體粗細：300，
字體大小：fontSizes.f10，
}}
dx={-4}
dy={-35}
textAnchor=“頂部”
填充={textColors.sceptreBlue}
>
{value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
</文字>
</片段>
）；
};
導出預設函數 BarChartRedList({
數據，
顏色，
}：{
資料：{ 時間：字串；丟失：數量；頭像？: 字串 }[];
withLabel？：布林值；
withAvatar？：布林值；
顏色？：字串；
}) {
const renderItems = useCallback(() => {
返回 （
<片段>
{data.map((項目，索引) => {
返回 （
<片段鍵={`${item.lost}_${index}`}>
<標籤列表
dataKey="頭像"
位置=“頂部”
鍵={`cell3-${index}`}
寬度={100}
偏移量={10}
內容={<自訂標籤圖像/>}
>>
<標籤列表
資料鍵=“時間”
鍵={`cell2-${index}`}
位置=“頂部”
偏移量={10}
寬度={100}
內容={<自訂標籤名稱/>}>>
<標籤列表
資料鍵=“遺失”
位置=“頂部”
鍵={`cell1-${index}`}
偏移量={5}
寬度={“100px”}
內容={<自訂標籤/>}
>>
<細胞
半徑={8}
鍵={`單元格-${索引}`}
寬度={40}
偏移量={20}
填入=“網址（#barGradient）”
>>
</片段>
）；
})}
</片段>
）；
}， [數據]）;
返回 （
<長條圖
寬度={500}
高度={200}
數據={數據}
保證金={{
頂部：120，
右：0，
左：0，
底部：20，
}}
>
<定義>
<線性漸層 id="barGradient" x1="0" y1="0" x2="0" y2="1">
）；
}</pre>
<p>在視窗載入後的第一次點擊按鈕之後，</p><p>我嘗試使用圖片渲染長條圖，但結果並不如我預想的那樣。在視窗載入後的第一次渲染中，圖片和文字不可見，但在進行一些操作後它們會變得可見。我無法解決這個問題。請幫我找出如何解決這個問題。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br />< / p>
