如何在胜利本机堆叠条形图中重叠布置x轴标签

问题描述

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

我没有如何改变标签的角度来布置它们，谁能帮助我解决问题。

当前图形图像

胜利本地人

react-native-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 },y: 3888 },y: 4975 },y: 5965 },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);

上面的代码可以复制粘贴到下面的链接中，并且可以编辑 https://formidable.com/open-source/victory/gallery/100-column-chart/

有什么办法可以像下面这样安排它们？

解决方法

通过使VictoryLabel度角为-45的{​​{1}}到独立轴上的tickLabelComponent道具上，我可以使它起作用：

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

因此，与其将VictoryLabel传递给axisLabelComponent上的VictoryAxis道具，不如将它传递给tickLabelComponent道具。

https://formidable.com/open-source/victory/docs/victory-axis#ticklabelcomponent

---

如果标签被切掉，您可能还需要在VictoryChart组件中添加一些填充：

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

https://formidable.com/open-source/victory/docs/victory-axis#padding

,

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

在您的情况下，您可以取消 VictoryAxis 的刻度格式，并通过将属性 scale={{x: 'time'}} 添加到 VictoryChart

让 VictoryChart 进行日期格式设置

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