Victory Chart 独立设置 x 轴和 y 轴标签的样式

【问题标题】：Victory Chart style the x-axis and the y-axis label independentlyVictory Chart 独立设置 x 轴和 y 轴标签的样式
【发布时间】：2020-07-22 21:17:42
【问题描述】：

我正在使用胜利图，我大致有以下代码

<VictoryChart domainPadding={30} {...commonProps}>
        <VictoryBar
          data={props.data}
          {...labelProps}
        />
  </VictoryChart>

我使用了 tickLabels 样式 {angle: 45}，但是这在内部应用于 x 和 y 轴，我只想要 x 轴的倾斜文本，但正如你所看到的，它也影响了 y-轴，我该怎么做？

【问题讨论】：

标签： javascript node.js reactjs react-native victory-charts

【解决方案1】：

尝试在组件中指定两个轴并仅将样式应用于其中一个

<VictoryChart domainPadding={10}>
  <VictoryBar
    data={sampleData}
  />
  <VictoryAxis dependentAxis
    tickValues={[1, 2, 3, 4,5]}
  />
  <VictoryAxis
    tickValues={[1, 2, 3, 4,5]}
    style={{ tickLabels: {angle :45}}}
  />
</VictoryChart>

【讨论】：

当我使用angle: 45 时，我的标签与图表上的刻度线偏移不正确，所以我想将它们推回对齐，你知道我会怎么做吗？您的代码暗示它应该可以正常工作，但它不能。
@ctrl-zpls - 我在angle 属性之后使用了transform: 'translate(-20, 10)'