如何在胜利原生堆叠条形图中排列x轴标签而不重叠

问题描述 投票:0回答:3

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

我不知道如何安排它们改变标签的角度,任何人都可以帮我解决这个问题。

当前图形图像

enter image description here

胜利原生

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 },
      { 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);

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

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

enter image description here

react-native axis-labels stacked-chart victory-native
3个回答
5
投票

我通过将具有

VictoryLabel
度角的
-45
传递到独立轴上的
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


3
投票

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

在您的情况下,您可以从 VictoryAxis 取消刻度格式,并通过将属性

scale={{x: 'time'}}
添加到
VictoryChart

让 VictoryChart 进行日期格式设置

然后将

fixLabelOverlap
添加到
VictoryAxis
,从而修复重叠问题。


0
投票

有一个名为

fixLabelOverlap
的属性,它非常适合顺序值,例如日期。对于名称等离散值,不建议这样做。

(hasSequentialValues ? (
   <VictoryAxis
      fixLabelOverlap  
      tickLabelComponent={<VictoryLabel angle={-45} dx={-25} dy={-5} renderInPortal />}
   />
)

© www.soinside.com 2019 - 2024. All rights reserved.