React原生/胜利图表:需要设置坐标样式

Question

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

我已经通过胜利图组件构建了折线图。

这是我的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

在VictoryAxis样式中添加tickLabels：{ angle：-90，}：

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