Диаграмма победы стилизует ось X и метку оси Y независимо друг от друга.

Я использую диаграмму победы, и у меня есть примерно следующий код

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

Я использовал стиль tickLabels {угол: 45}, однако он применяется внутри как к оси x, так и к оси y, я хочу наклонить текст только для оси x, но, как вы можете видеть, это также повлияло на ось y, как могу ли я сделать это?

введите здесь описание изображения


react-native reactjs node.js javascript victory-charts
person Dan Hunex    schedule 22.07.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

попробуйте указать обе оси в компоненте и применить стиль только к одной из них

<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>
person Jacek Rojek    schedule 22.07.2020
comment
Когда я использую angle: 45, мои метки неправильно смещаются относительно делений на диаграмме, поэтому я хочу подтолкнуть их обратно, чтобы выровнять, знаете, как бы я это сделал? Ваш код подразумевает, что он должен просто работать, но это не так. - person ctrl-z pls; 14.04.2021