<p><br /></p>
<pre class="brush:php;toolbar:false;">import React, { Fragment, useCallback } from "react";
import {
BarChart,
Bar,
ResponsiveContainer,
Cell,
LabelList,
YAxis,
} from "recharts";
import { fontSizes, textColors } from "styles/theme";
const CustomLabelImage = (props: any) => {
const { x, y, value } = props;
return (
<Fragment key={`${Math.random()}`}>
<image
x={+x! - 5}
clipPath={"circle(40%)"}
y={y - 105}
width={55}
height={55}
href={value}
/>
</Fragment>
);
};
const CustomLabel = (props: any) => {
const { x, y, value } = props;
return (
<Fragment key={`${Math.random()}`}>
<text
x={x}
y={y}
className="grotesk"
style={{
fontWeight: 600,
fontSize: fontSizes.f20,
}}
dx={10}
dy={-10}
textAnchor="top"
fill={textColors.sceptreBlue}
>
{value}
</text>
</Fragment>
);
};
const CustomLabelName = (props: any) => {
const { x, y, value } = props;
return (
<Fragment key={`${Math.random()}`}>
<text
x={x}
y={y}
className="grotesk"
style={{
fontWeight: 300,
fontSize: fontSizes.f10,
}}
dx={-4}
dy={-35}
textAnchor="top"
fill={textColors.sceptreBlue}
>
{value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
</text>
</Fragment>
);
};
export default function BarChartRedList({
data,
color,
}: {
data: { time: string; lost: number; avatar?: string }[];
withLabel?: boolean;
withAvatar?: boolean;
color?: string;
}) {
const renderItems = useCallback(() => {
return (
<Fragment>
{data.map((item, index) => {
return (
<Fragment key={`${item.lost}_${index}`}>
<LabelList
dataKey="avatar"
position="top"
key={`cell3-${index}`}
width={100}
offset={10}
content={<CustomLabelImage />}
/>
<LabelList
dataKey="time"
key={`cell2-${index}`}
position="top"
offset={10}
width={100}
content={<CustomLabelName />}
/>
<LabelList
dataKey="lost"
position="top"
key={`cell1-${index}`}
offset={5}
width={"100px"}
content={<CustomLabel />}
/>
<Cell
radius={8}
key={`cell-${index}`}
width={40}
offset={20}
fill="url(#barGradient)"
/>
</Fragment>
);
})}
</Fragment>
);
}, [data]);
return (
<div>
<ResponsiveContainer height={350}>
<BarChart
width={500}
height={200}
data={data}
margin={{
top: 120,
right: 0,
left: 0,
bottom: 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>
);
}</pre>
<p>在窗口加载后的第一次点击按钮之后，</p><p>我尝试使用图片渲染柱状图，但结果并不如我预期的那样。在窗口加载后的第一次渲染中，图片和文本不可见，但在进行一些操作后它们会变得可见。我无法解决这个问题。请帮我找出如何解决这个问题。</p><p>我的包版本是："recharts": "^2.4.3", "next": "13.4.7", "react": "18.2.0"。</p><p><br /></p>
1
835
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
经过一些研究，我找到了解决方案。
<Bar yAxisId="left" dataKey="lost" isAnimationActive={false} //added this > {renderItems()} </Bar>