react-native - 胜利图 - x 轴标签缩短、自定义范围并防止重叠

Question

使用胜利图，我创建了一个简单的条形图。在 X 轴上，我的数字很大，从 500,000 到 3,000,000。因为图表非常窄，所以 X 轴上的数字是重叠的。我的代码如下所示：

   <VictoryChart>
      theme={VictoryTheme.material}
      <VictoryGroup
        height={chartHeight}
        offset={10}>
        <VictoryBar
          horizontal
          data={chart2}
          labels={d => d.y}
          labelComponent={<VictoryLabel dy={10} />}
        />
        <VictoryBar horizontal data={chart1} />
      </VictoryGroup>
    </VictoryChart>

1. 我想要这样的 x 轴标签：500,000 -> 500K。
2. 此外，在 x 轴上，我希望只有 4-5 个标签，它们总是均匀分布，例如 0、1000K、2000K、3000K、4000K。如果我有 x 轴达到 1000K 的数据，则分离将是 0、250K、500K、750K、1000K。

Answer 1

还有一个叫fixLabelOverlap你可以传入轴的道具。

默认设置为false。

https://formidable.com/open-source/victory/docs/victory-axis#fixlabeloverlap

Answer 2

只需将 Padding 添加到组中

https://formidable.com/open-source/victory/guides/layout

style={{
                data: { width: 3 },
                labels: { padding: -20 }
              }}