React native 如何在victory native堆叠条形图中排列不重叠的x轴标签

我有一个堆叠的条形图，它的x轴标签是日期，标签是重叠的。我如何安排它们，使它们不会在x轴的下一个标签上重叠

我不知道如何安排他们改变标签的角度，谁能帮我解决这个问题

当前图形图像

胜利土著

反应本机svg

const myDataset = [
  [
      { x: "20/10/2020", y: 18653 },
      { x: "21/10/2020", y: 20000 },
      { x: "23/10/2020", y: 97345 },
      { x: "24/10/2020", y: 25687 },
      { x: "25/10/2020", y: 89761 }
  ],
  [
      { x: "20/10/2020", y: 4566 },
      { x: "21/10/2020", y: 3888 },
      { x: "23/10/2020", y: 4975 },
      { x: "24/10/2020", y: 5965 },
      { x: "25/10/2020", y: 5768 }
  ],
];

class App extends React.Component {
  // This is an example of a function you might use to transform your data to make 100% data
  transformData(dataset) {
    const totals = dataset[0].map((data, i) => {
      return dataset.reduce((memo, curr) => {
        return memo + curr[i].y;
      }, 0);
    });
    return dataset.map((data) => {
      return data.map((datum, i) => {
        return { x: datum.x, y: (datum.y / totals[i]) * 100 };
      });
    });
  }

  render() {
    const dataset = this.transformData(myDataset);
    return (
      <div>
        <VictoryChart height={400} width={400}
          domain={{ x: [0,5], y: [0, 100000] }}
          domainPadding={{ x: 30, y: 20 }}
        >
           <VictoryLegend x={280} y={0}
              gutter={50}
              style={{title: {fontSize: 20 } }}
              data={[
                { name: "Tax", symbol: { fill: "blue" } },
                { name: "Amount", symbol: { fill: "black" } }
              ]}
            />
            <VictoryStack
              colorScale={["black", "blue"]}
            >
              {myDataset.map((data, i) => {
                return <VictoryBar barWidth={20}
             data={data} key={i} labelComponent={<VictoryLabel y={250} verticalAnchor={"start"}/>}/>;
              })}
            </VictoryStack>
            <VictoryAxis dependentAxis />
            <VictoryAxis 
            padding={{ left: 80, right: 60 }}
            axisLabelComponent={<VictoryLabel angle={20}/>}
            tickFormat={["20/oct/20","21/oct/20", "23/oct/20","24/oct/20","25/10/20"]}/>
        </VictoryChart>
      </div>
    );
  }
}

ReactDOM.render(<App/>, mountNode);

const myDataset=[
[
{x:“20/10/2020”，y:18653}，
{x:“21/10/2020”，y:20000}，
{x:“2020年10月23日”，y:97345}，
{x:“24/10/2020”，y:25687}，
{x:“25/10/2020”，y:89761}
],
[
{x:“20/10/2020”，y:4566}，
{x:“21/10/2020”，y:3888}，
{x:“2020年10月23日”，y:4975}，
{x:“24/10/2020”，y:5965}，
{x:“25/10/2020”，y:5768}
],
];
类应用程序扩展了React.Component{
//这是一个函数示例，您可以使用该函数将数据转换为100%数据
转换数据（数据集）{
常量总计=数据集[0]。映射（（数据，i）=>{
返回数据集。减少（（备注，当前）=>{
返回备忘录+当前[i].y；
}, 0);
});
返回dataset.map（（数据）=>{
返回数据.map（（数据，i）=>{
返回{x:datum.x，y:（datum.y/总计[i]）*100}；
});
});
}
render（）{
const dataset=this.transformData（myDataset）；
返回(
{myDataset.map（（数据，i）=>{
返回；
})}
);
}
}
ReactDOM.render(

有没有办法，我可以安排他们如下

我通过将
VictoryLabel
与独立轴上的
tickLabelComponent
道具成
-45
度角传递给
tickLabelComponent
道具，使其工作：

<VictoryAxis tickLabelComponent={<VictoryLabel angle={-45} y={350} />} />

这是我使用的解决方案。我必须在x轴上显示时间

在您的情况下，您可以从VictoryAxis中去掉勾号格式，让VictoryChart通过将属性
scale={{x:'time'}}
添加到
VictoryChart

然后将
fixLabelOverlap
添加到
VictoryAxis
中，以解决重叠问题

padding={{top: 100, bottom: 90, left: 70, right: 80}}