1

标记是水平线（沿 x 轴）

我正在使用 Nivo 堆积条形图在条形图上显示分数范围。为此，我使用了标记道具。我几乎让它看起来像我想要的那样，除了标记延伸到酒吧之外，这不是我需要的。

当有人在 Github 上问同样的问题时，似乎目前还没有一种简单的方法可以做到这一点。nivo 的创建者 plouc 说：

简短的回答，你不能：/但是你可以使用一个额外的层来实现相同的结果，使用层属性并添加一个额外的组件。

所附照片来自Nivo关于添加标记的文档（单击“故事”选项卡将显示基本代码）。

这是标记项的源代码。如果您在整个文档中搜索宽度，您可以看到它设置在行的 x2 中。进一步向下滚动，您可以看到有一个strokeWidth属性，但据我所知，它只控制线条的粗细，而不是线条的宽度。

有人可以让我知道我错过了什么吗？

这是我的代码。我在条形图上显示了两个标记，因此传入了两个标记对象。为了简化，我删除了不相关的 Bar 道具。

         <NivoBar
            data={data}
            keys={['floor', 'pattern', 'ceiling']}
            markers={[
                {
                    axis:              'y',
                    position:          'right',
                    legendOffsetX:     -34,
                    legendOffsetY:     0,
                    value:             ceiling,
                    lineStyle:         {stroke: 'red', strokeWidth: 2},
                    legend:            `${ceiling}%`,
                    legendOrientation: 'horizontal',
                    textStyle:         {fill: 'orange', fontWeight: 'bold'}
                },
                {
                    axis:              'y',
                    position:          'right',
                    legendOffsetX:     -34,
                    legendOffsetY:     0,
                    value:             floor,
                    lineStyle:         {stroke: 'red, strokeWidth: 2},
                    legend:            `${floor}%`,
                    legendOrientation: 'horizontal',
                    textStyle:         {fill: 'orange, fontWeight: 'bold'}
                }
            ]}
        />
4

0 回答 0