X轴标签在react-native svg-charts中重叠

Question

我正在使用 react-native-svg-charts 来显示饼图和条形图 在 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' }}
   />

Answer 1

<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

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

到

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

Answer 2

您可以使用rotation svg 属性旋转标签。

<XAxis
  data={data}
  svg={{ rotation: 30 }}
/>