将水平 Victory Native 条形图向左移动

Question

在我的 React Native 应用程序中，我需要显示一些没有轴的条形图。然而，所有的条形图都偏向右侧，就好像显示了一个轴，这使得屏幕看起来不平衡。这是我的屏幕当前的样子：

我想将所有这些条形图拉到左侧，以便它们与标签对齐。似乎无法弄清楚如何进行如此简单的操作。我尝试过使用 padding、domainPadding 等，但没有成功。这就是我的代码目前的样子：

const MyChart = () => (
  <VictoryGroup
    domainPadding={{ x: 30, y: 0 }}
    theme={VictoryTheme.material}
    domain={{ y: [0, 110] }}
  >
    <VictoryStack>
      {dataSet.map((data, index) => (
          <VictoryBar
            horizontal
            key={index}
            data={data}
            domainPadding={{ x: 0, y: 30 }}
            labels={d => 'Test Bar'}}
            labelComponent={<VictoryLabel dy={-40} x={0} />}
          />
        )
      )}
    </VictoryStack>
  </VictoryGroup>
)

Answer 1

我的同事解决了这个问题，我想我也可以发布解决方案，以防有人偶然发现同样的问题。

之前设置的 padding 位于 上VictoryGroup，您无法使用 style 属性更改它，并且需要通过我在文档中忽略的 padding 属性来更改它。

所以基本上我们学到的教训是：

1-正在寻找错误的填充位置（我的重点是VictoryBar）

2- 不要使用style道具并使用padding道具。

基本上，对于最初的帖子中给出的示例，问题的解决方案如下：

const MyChart = () => (
  <VictoryGroup
    domainPadding={{ x: 30, y: 0 }}
    theme={VictoryTheme.material}
    domain={{ y: [0, 110] }}
    padding={{ top: 30, right: 100, bottom: 30, left: 0 }}
  >
    <VictoryStack>
      {dataSet.map((data, index) => (
          <VictoryBar
            horizontal
            key={index}
            data={data}
            domainPadding={{ x: 0, y: 30 }}
            labels={d => 'Test Bar'}}
            labelComponent={<VictoryLabel dy={-40} x={0} />}
          />
        )
      )}
    </VictoryStack>
  </VictoryGroup>
)