React Native / Victory Charts：需要样式坐标答案

【问题标题】：React Native / Victory Charts : Need to style coordsReact Native / Victory Charts：需要样式坐标
【发布时间】：2017-11-04 02:45:18
【问题描述】：

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

有人有什么想法吗？

【问题讨论】：

你好亚伦！发布此问题的最佳位置可能是针对胜利本地人的问题，地址为：github.com/formidableLabs/victory-native。我不能亲自帮助你，只是想我会让你知道你可能会从那里的问题中获得更多的成功，祝你好运！
如何更改图表颜色？

标签： javascript react-native expo victory-charts

【解决方案1】：

添加刻度标签：{角度：-90，} VictoryAxis 风格：

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

【讨论】：