1

我正在 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”，如图所示。

有人有什么想法吗？

4

1 回答 1

0

以 VictoryAxis 的样式添加 tickLabels: { angle: -90, } ：

      <VictoryAxis
        label="logdate"
        style={{
          axisLabel: { padding: 30 },
          tickLabels: { angle: -90, }
        }}
      />
于 2020-04-26T11:22:22.413 回答