我正在使用 Recharts
库创建 StackBarChart
示例,但当其位置设置为“右”时我无法看到标签
code> 虽然我可以显示其他标签位置。
<BarChart width={400} height={300} data={data} layout="vertical">
...
<Bar dataKey="pv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#8884d8" background={{fill: "#ddd", radius: [20,20,20,20]}} tick={false} />
<Bar dataKey="uv" stackId="a" barSize={15} radius={[20,20,20,20]} fill="#aaa" >
<LabelList dataKey="name" position="right" />
{/* works fine <LabelList dataKey="name" position="top" /> */}
</Bar>
</BarChart>
这是Jsfiddle (已更新)。
最佳答案
我已经更新了你的 fiddle 脚本here .
您必须为 LabelList
提供正确的 dataKey
字段,并将 LabelList
作为 Bar
的子项组件
更新:
新jsfiddle ,您的情况需要 margin
。因此,SVG 在图表旁边保留了一些空间用于附加文本。请注意,它是图表的 margin
props,而不是 CSS 样式的 margin
。
关于javascript - ReCharts - 堆叠条形图右对齐时无法看到标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50643458/