Reagieren Sie beim ersten Rendern spaltenförmig auf Recharts
P粉043432210
2023-07-28 15:09:12
<p><br /></p>
<pre class="brush:php;toolbar:false;">import React, { Fragment, useCallback } from "react";
importieren {
Balkendiagramm,
Bar,
ResponsiveContainer,
Zelle,
Etikettenliste,
Y-Achse,
} von „recharts“;
import {fontSizes, textColors} aus „styles/theme“;
const CustomLabelImage = (props: any) => {
const { x, y, value } = props;
zurückkehren (
<Fragment key={`${Math.random()}`}>
<Bild
x={+x! - 5}
clipPath={"circle(40%)"}
y={y - 105}
Breite={55}
Höhe={55}
href={Wert}
/>
</Fragment>
);
};
const CustomLabel = (props: any) => {
const { x, y, value } = props;
zurückkehren (
<Fragment key={`${Math.random()}`}>
<Text
x={x}
y={y}
className="grotesk"
Stil={{
Schriftgewicht: 600,
Schriftartgröße: Schriftartgrößen.f20,
}}
dx={10}
dy={-10}
textAnchor="top"
fill={textColors.sceptreBlue}
>
{Wert}
</text>
</Fragment>
);
};
const CustomLabelName = (props: any) => {
const { x, y, value } = props;
zurückkehren (
<Fragment key={`${Math.random()}`}>
<Text
x={x}
y={y}
className="grotesk"
Stil={{
Schriftgewicht: 300,
Schriftartgröße: Schriftartgrößen.f10,
}}
dx={-4}
dy={-35}
textAnchor="top"
fill={textColors.sceptreBlue}
>
{value?.split(" ")[0]} {value?.split(" ")[1]?.slice(0, 1)}
</text>
</Fragment>
);
};
Exportieren Sie die Standardfunktion BarChartRedList({
Daten,
Farbe,
}: {
Daten: { time: string; verloren: Nummer; Avatar?: string }[];
withLabel?: boolean;
withAvatar?: boolean;
Farbe?: string;
}) {
const renderItems = useCallback(() => {
zurückkehren (
<Fragment>
{data.map((item, index) => {
zurückkehren (
<Fragment key={`${item.lost}_${index}`}>
<LabelList
dataKey="avatar"
position="oben"
key={`cell3-${index}`}
width={100}
offset={10}
content={<CustomLabelImage />}
/>
<LabelList
dataKey="time"
key={`cell2-${index}`}
position="oben"
offset={10}
width={100}
content={<CustomLabelName />}/>
<LabelList
dataKey="verloren"
position="oben"
key={`cell1-${index}`}
offset={5}
width={"100px"}
content={<CustomLabel />}
/>
<Zelle
Radius={8}
key={`cell-${index}`}
Breite={40}
Offset={20}
fill="url(#barGradient)"
/>
</Fragment>
);
})}
</Fragment>
);
}, [Daten]);
zurückkehren (
<div>
<ResponsiveContainer height={350}>
<BarChart
Breite={500}
Höhe={200}
data={data}
Marge={{
oben: 120,
rechts: 0,
links: 0,
unten: 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>
经过一些研究,我找到了解决方案。
<Bar yAxisId="left" dataKey="lost" isAnimationActive={false} //added this > {renderItems()} </Bar>