在水平 Victory 条形图中定位 y 轴标签

Question

我在使用水平条的 VictoryChart 中遇到布局问题。我试图让标签在下面的垂直轴上左对齐：

我使用的相关代码是

<VictoryChart domainPadding={{ x: [20, 20] }}>
  <VictoryAxis
    dependentAxis={true}
    tickValues={[0, 2, 4, 6, 8, 10, 12, 14]}
  />
  <VictoryAxis
    labelComponent={<VictoryLabel textAnchor="start" />}
    style={{
      tickLabels: {
        fontSize: 10,
        textAnchor: "end"
      }
    }}
  />
  <VictoryBar
    data={data}
    horizontal={true}
    domain={{ y: [-10, 15] }}
    x="name"
    y="value"
  />
</VictoryChart>

并且我创建了一个沙箱 here。

我必须添加 tickLabels 样式 textAnchor: "end" 才能让标签首先可见，但我非常希望它们与一条公共的左垂直线对齐，而不是右对齐就像他们现在一样。我尝试将 labelComponent 定义为 <VictoryLabel textAnchor="start" /> 但这没有达到我希望的效果。在检查生成的 SVG 后，它似乎控制文本如何锚定在它的容器元素中，但我真正需要做的是将整个容器向左移动。

我已经多次阅读 API 文档，但未能发现任何看起来有用的内容。 VictoryGroup 看起来很有希望，但文档明确告诉我不要将它与轴组件一起使用。

Answer 1

好吧，我只是在这里的道具丛林中迷路了。

解决方案首先是不要尝试使用 CSS 样式来执行此操作，因此必须取消 tickLabels.textAnchor: "end" 样式。其次，有不止一个标签组件，对于 VictoryAxis 上的标签，相关的属性是 tickLabelComponent 而不是 labelComponent.

将第二个 VictoryAxis 组件替换为

<VictoryAxis
    tickLabelComponent={(
      <VictoryLabel
          verticalAnchor="middle"
          textAnchor="start"
          x={0}
      />
  )}
  style={{
    tickLabels: {
      fontSize: 10,
    }
  }}
/>

解决了我的问题。

在水平 Victory 条形图中定位 y 轴标签

Positioning y-axis labels in a horizontal Victory bar chart

victory-charts