无法使用索环中的 <Meter> 组件显示标签

Question

我无法为我的图表单独显示标签。

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box key={type} margin={{ bottom: 'xsmall' }}>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

这里，它没有在图表的一侧显示标签：60。你能建议我如何显示这个吗？谢谢

Answer 1

您可以使用文本组件放置您认为合适的标签：

const Demo = () => (
  <Box>
    {['bar', 'circle'].map(type => (
      <Box gap="medium" key={type} margin={{ bottom: 'xsmall' }}>
        <Text>Label</Text>
        <Meter
          type={type}
          size='small'
          values={[
            { value: 60, label: 'sixty', onClick: () => alert('60') },
          ]}
        />
      </Box>
    ))}
  </Box>      
);

render(<Demo />);

以类似的方式，您可以在组件周围移动Text，目前，它会显示在顶部，但您可以将其移动到Meter的底部、左侧、右侧，甚至使用 Stack 组件将标签放置在 Meter 中间，希望能解答您的疑问

无法使用索环中的 <Meter> 组件显示标签

Not able to display a label using <Meter> component from grommet

frontend

graph

pie-chart

reactjs

grommet