php - 如何在 react-native-chart-kit 中更改折线图的标签

Question

我使用 sql server data 和 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,
        }}
       />