Reagieren Sie beim ersten Rendern spaltenförmig auf Recharts
P粉043432210
P粉043432210 2023-07-28 15:09:12
0
1
537
<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>
P粉043432210
P粉043432210

Antworte allen(1)
P粉237689596

经过一些研究,我找到了解决方案。

<Bar 
   yAxisId="left"
   dataKey="lost"
   isAnimationActive={false} //added this
>
  {renderItems()}
</Bar> 
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage