React Native / Victory Charts：需要设计风格的坐标

Question

我正在React Native中构建一个小型移动应用程序，用于显示折线图。

我通过Victory Charts组件构建了线图。

这是我的App.js

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryAxis, VictoryLine } from 'victory-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      <VictoryChart
          domainPadding={{x: 40}}
          style={{marginLeft: 120}}
        >
          <VictoryLine
            data={[
              {logdate: "11-01", temp: 110 },
              {logdate: "12-01", temp: 98 },



            ]}
            x="logdate"
            y="temp"
            style={{
              data: {opacity: 0.7},
              labels: {fontSize: 12},
              parent: {border: "1px dotted #001"}
            }}

          />
          <VictoryAxis
            label="logdate"
            style={{
              axisLabel: { padding: 30 }
            }}
          />
          <VictoryAxis dependentAxis
            label="temp"
            style={{
              axisLabel: { padding: 40 }
            }}
          />
      </VictoryChart>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

线条图显示如下

所示

图表工作正常。

我需要帮助设计x轴合作标签的样式，如图中所示。

不是水平显示“11-01”，而是希望它垂直显示，如图所示。

任何人都有任何想法？

Answer 1

添加tickLabels：{角度：-90，} 以VictoryAxis的风格：

      <VictoryAxis
        label="logdate"
        style={{
          axisLabel: { padding: 30 },
          tickLabels: { angle: -90, }
        }}
      />