javascript - 如何在@nivo/条形图中显示 0 值，或者如果值为 0 来自 api，有什么方法可以显示无数据标签

Question

我想在 Nivo 条形图上显示 0 值，当值为 0 时，它现在显示任何线，有没有办法在条形图中显示 0 值。如果图形线上的值为零，我们如何添加无数据标签？

图形图像

在上面的图片链接中，预算和质量保证百分比为 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',
            background: 'inherit',
            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,
        tickPadding: 5,
        tickRotation: 0,
        legend: '',
        legendPosition: 'middle',
        legendOffset: -60
    }}
    labelSkipWidth={12}
    labelSkipHeight={12}
    labelTextColor={{ from: 'color', modifiers: [['darker', 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}
/>

Answer 1

在最新版本的@nivo/bar（此时为 0.67.0）中，值为零的 bar 不会被过滤掉。使用零值，您将拥有：

要仅为具有 values 的标签上移标签0，您可以覆盖label道具：

<ResponsiveBar
    .....
    label={(d) =>
        d.value === 0 ? <tspan y="-15">{d.value}</tspan> : d.value
    }
    .....
/>

这使：

沙盒