如何在单词之间留有空格的自定义recharts图例
提问于 2020-06-30 08:29:11
因此，我尝试使用recharts制作饼图，但我想制作一个自定义图例，如下所示：
所以我想做的是创建一个ul并把它放在它旁边，但问题是它没有响应，所以这就是为什么我在考虑自定义图例。到目前为止，我所做的：
我不知道如何设置一个边距，使他们相等，或这样的风格，我真的需要帮助。
代码：
<Row>
<Col lg="9">
<ResponsiveContainer width="100%" height={220}>
<PieChart data={testMeasurments.data}>
<Tooltip />
<Legend
height={170}
layout="vertical"
iconType="circle" align="right"
// iconType="circle" align="right" wrapperStyle={{
// // marginBottom: "10%",
// // marginRight: "30%",
// // marginLeft:"20%"
// // lineHeight: "-20px"
// }}
payload={
testMeasurments.map(
item => ({
id: item.name,
color:item.fill,
type: "circle",
value: `${item.name}` +" " + `${item.value}measurments` ,
})
)
}
>
</Legend>
{testMeasurments.map((s) =>
<Pie
dataKey="value"
isAnimationActive={false}
data={s.data}
outerRadius={100}
innerRadius={70}
fill="fill"
><Label value={value} position="center" />
</Pie>
)}
</PieChart>
</ResponsiveContainer>
</Col>
</Row>
回答 2
Stack Overflow用户
发布于 2021-01-19 18:46:07
这是个老问题，但这可能会对某些人有所帮助。您可以使用内容属性自定义图例，也可以检查doc
const renderLegend = (props) => {
const { payload } = props;
return (
<div style={{display: 'grid', gridTemplateColumns: 'max-content max-content', gap: '1em'}}>
{
payload.map((entry, index) => (
<div>entry.value</div><div>measurments</div>
))
}
</div>
);
}
<Legend content={renderLegend} />
Stack Overflow用户
发布于 2021-01-11 17:22:39
您可以使用CSS来定位图例中的每个li项。Recharts使用类".recharts-legend-item“。
.recharts-legend-item {
margin-bottom: 10px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62653308
复制相关文章
腾讯云开发者
