将水平的 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

我的同事解决了这个问题，我想我也可以 post 解决方案，以防万一有人遇到同样的问题。

之前设置的 padding 在 VictoryGroup 上，您不能使用 style 属性更改它，需要通过我在文档中忽略的 padding 属性来更改它。

所以基本上这里吸取的教训是：

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

2- 不要使用 style 属性，使用 padding 属性。

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

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>
)

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

Move horizontal Victory Native bar chart to the left

css

react-native

victory-charts