如何解决如何在 recharts 中将字符串与值连接起来 - ReactJS
当值显示在条形顶部时,我想将“%”与 barchart
上的值连接起来。
怎么做?
<ResponsiveContainer width="99%" aspect={4}>
<BarChart data={chartData} margin={{ top: 0,left: -30,right: 0,bottom: 0 }}>
<Bar dataKey='hum' name="Humidity" barSize={15} fill='rgba(0,60,255,0.6)' unit=" %" >
<LabelList dataKey="hum" position="top" />
</Bar>
<Cartesiangrid stroke="#ccc" strokeDasharray="5 5" />
<XAxis dataKey="date" tick={{ fontSize: 12,fill: 'black' }} tickFormatter={(unixTime) => moment(unixTime).format('DD.MM - HHч.')} interval={1} />
<YAxis tick={{ fontSize: 12,fill: 'black' }} />
<Tooltip />
</BarChart>
</ResponsiveContainer>
我返回这样的数据:
formatData = (data) =>
data.map(({ dt_txt,main,pop }) => ({
// date -> Can be used as dataKey for XAxis
//Further you can format the date as per your need
date: dt_txt,// temp -> Can be used as dataKey for Line
temp: main.temp,hum: main.humidity,rain: pop
}));
解决方法
尝试在 YAxis 中给出“unit”属性,像这样
编辑: 尝试像这样更改 LabelList 标签。
<LabelList dataKey="hum" position="top" content={renderLabel} />
并在您的代码中添加以下功能性反应组件。
const renderLabel= ({value}) => {
return (
<span>{ value + '%'}</span>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。