如何在react-native-chart-kit中更改LineChart的标签

Question

我用sql server数据和php backEnd在react native中绘制了一个图表；

但是我想修改我的标签(存在于图的x中的值)

export default class Home extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
         isLoading: true,
         data: {
             labels: [],
             datasets: [
                 {
                     data: [],
                 }
             ]
         }
      }
  }
  componentDidMount() {
   this.GetData();
   }
  GetData = () => {
      const self = this;
      return fetch('http://192.168.1.5:80/graph.php')
      .then((response) => response.json())
      .then((responseJson) => {
        const dataClone = {...self.state.data}
        const values = responseJson.map(value => value.ChiffreAffaire);
        const label = responseJson.map(value => value.M500_NOM);

      dataClone.datasets[0].data = values;
      dataClone.labels= label;

        this.setState({
          isLoading: false,
          data: dataClone,
        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }

  render() {
    const fill='rgb(134,65,244)'
    if(this.state.isLoading){
    return(
      <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
    )
  }
      return (

        <View style={{flex: 1}}>

      <View style={{backgroundColor:'#58ACFA',flex:1,justifyContent: 'center'}}>
            <TouchableOpacity style={{marginTop:32,marginLeft:20}} onPress={this.props.navigation.openDrawer }>
            <FontAwesome5 name="bars" size={24} color="#161924" />
            </TouchableOpacity >
            </View>

            <ScrollView >
            <LineChart
            data={this.state.data}
            width={Dimensions.get("window").width*0.9}
            height={400}
            yAxisLabel={"DH"}
            chartConfig={chartConfig}
            bezier
            style={{
              marginTop:40,
              marginLeft:20,
              fontSize:1,
            }}
            />
            </ScrollView>

            </View>

正如你在这张图中看到的，我应该提到客户的名字，但它是不可轻视的，因为它是压缩的，如果有任何选项可以在我点击按钮时提到它们，或者以垂直的方式写出来；

​

求求你，有什么想法吗？

Answer 1

可以使用verticalLabelRotation在x轴上旋转标签。

在您的代码中，您可以像这样使用

<LineChart
        verticalLabelRotation={110} //Degree to rotate
        data={this.state.data}
        width={Dimensions.get("window").width*0.9}
        height={400}
        yAxisLabel={"DH"}
        chartConfig={chartConfig}
        bezier
        style={{
          marginTop:40,
          marginLeft:20,
          fontSize:1,
        }}
       />