React native X轴标签在本机svg图表中重叠

我使用react原生svg图表来显示饼图和条形图 在react native条形图中，X轴标签重叠或不显示

如何在条形图中以X轴呈现文本内容

这是我的密码

<XAxis
  style={{flex:1,height: windowSize.width/1.875, paddingTop:10 }}
  data={data2}
  formatLabel={value => {
   return data2.map(item => {
      return `${item}\n`;
          });
        }}
   contentInset={{ left: 30, right: 30 }}
   svg={{ fontSize: 10, fill: '#3A8F98' }}
   />

{
返回data2.map（项=>{
返回`${item}\n`；
});
}}
contentInset={{左：30，右：30}
svg={{fontSize:10，fill:'#3A8F98'}}
/>

您可以使用

rotation

svg属性旋转标签

---

您可以使用

rotation

svg属性旋转标签

到

到

---

如果我使用svg={{rotation:30}}，我会变成这样。看起来每个标签都是相同的，并且包含了整个标签集使用

formalLabel

您想要实现什么？我想在条形图中显示标签，就像在图像链接中一样。我认为您可以删除该属性并使用默认值，即

formatLabel={x=>x}

。现在，您正在将整个

data2

集发送到每个标签。如果我使用svg={{rotation:30}}，我会变成这样。看起来每个标签都是相同的，并且包含了整个标签集使用

formalLabel

您想要实现什么？我想在条形图中显示标签，就像在图像链接中一样。我认为您可以删除该属性并使用默认值，即

formatLabel={x=>x}

。现在，您正在向每个标签发送整个

data2

集。

<XAxis
   style={{ paddingTop: 10,backgroundColor:'red' }}
   data={data}
   formatLabel={(value, index) => this.state.data2[index]}
   contentInset={{ left: 18, right: 18 }}
   svg={{ fontSize: windowSize.width/55, fill: '#3A8F98' }}/>

formatLabel={value => {return data2.map(item => {
  return `${item}\n`;
      });
    }}

formatLabel={(value, index) => this.state.data2[index]}