如何解决如何在@nivo/条形图中显示 0 值,或者如果值是来自 api 的 0,是否有任何方法可以显示无数据标签
我想在 Nivo 条形图上显示 0 值,当值为 0 时,它现在显示任何一条线,有什么方法可以在条形图中显示 0 值。如果图形线上的值为零,我们如何添加无数据标签?
在上图链接中,Budget and Quality Assurance百分比为0,我想在这一行不显示数据标签
代码如下:
<ResponsiveBar
data={this.state.compComparisonDataDivisionWiseDMEApi.data}
keys={this.state.compComparisonDataDivisionWiseDMEApi.keys}
indexBy="type"
margin={{ top: 100,right: 0,bottom: 60,left: 100 }}
padding={0.3}
innerPadding={10}
label={d => `${d.value}%`}
// onClick={e => this.barChartClicked(e)}
groupMode="grouped"
colors={["#3d1f42","#542b5a","#68366f","#93519c","#68356f","#93519c"]}
layout="vertical"
enableGridY={false}
defs={[
{
id: 'dots',type: 'patternDots',background: 'inherit',color: '#38bcb2',size: 4,padding: 1,stagger: true
},{
id: 'lines',type: 'patternLines',color: '#eed312',rotation: -45,linewidth: 6,spacing: 10
}
]}
fill={[
{
match: {
id: 'fries'
},id: 'dots'
},{
match: {
id: 'sandwich'
},id: 'lines'
}
]}
borderColor={{ from: 'color',modifiers: [['darker',1.6]] }}
axisTop={null}
axisRight={null}
axisBottom={{
tickSize: 5,tickPadding: 5,tickRotation: 0,legend: '',legendPosition: 'middle',legendOffset: 50
}}
axisLeft={{
tickSize: 5,legendOffset: -60
}}
labelSkipwidth={12}
labelSkipHeight={12}
labelTextColor={{ from: 'color',1.6]] }}
legends={[
{
dataFrom: 'keys',anchor: 'top-right',direction: 'column',justify: false,translateX: -100,translateY: -100,itemsspacing: 2,itemWidth: 150,itemHeight: 25,itemDirection: 'left-to-right',itemOpacity: 0.85,symbolSize: 20,effects: [
{
on: 'hover',style: {
itemOpacity: 1
}
}
]
}
]}
animate={true}
motionStiffness={90}
motiondamping={15}
/>
解决方法
在最新版本的@nivo/bar(此时为0.67.0)中,没有过滤掉值为0的bar。使用零值,您将拥有:
要仅针对值为 0
的标签向上移动标签,您可以覆盖 label
属性:
<ResponsiveBar
.....
label={(d) =>
d.value === 0 ? <tspan y="-15">{d.value}</tspan> : d.value
}
.....
/>
给出:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。