胜利图表 X 轴标签应按周分组并防止重叠

大佬教程收集整理的这篇文章主要介绍了胜利图表 X 轴标签应按周分组并防止重叠，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决胜利图表 X 轴标签应按周分组并防止重叠？

我正在开发一个 React Native 应用程序，

我创建了一个简单的 Victoryline 图表。在 X 轴上，我有日期和 Y 轴现金流总量，X 轴上的日期重叠，Y 轴值太长而无法显示。我附上了预期图像和实际图像。请帮我解决这个问题。

预期图像：

实际图片：

我的代码如下：

<VIEw style={styles.chartContainer}>
        {CashFlowChartData == null ||
          cashFlowChartData.data == null ||
          cashFlowChartData.messageCode.code !== 1 ? (
            <touchabLeopacity
              onPress={() => setrefreshChart(refreshChart + 1)}>
              <Text style={styles.text5}>
                {i18n.t('cashFlowWidget.NoDataAvailableTryAgain')}
              </Text>
            </touchabLeopacity>
          ) : (
            <touchabLeopacity
              style={styles.graph}
              onLayout={(event) => onLayout(event)}>
              <VIEw pointerEvents="none">
                {CashFlowChartData !== null ? (
                  <VictoryChart
                    theme={Victorytheme.material}
                    wIDth={ChartSize.wIDthChart + 10}
                    height={250}>
                    {/* Red Annotation line */}
                    <VictoryAxis
                      scale={{ x: "date" }}
                      tickValues={xTickValues}
                      // tickFormat={t => new Date(t)}
                    />
                    <VictoryAxis dependentAxis />
                    <Victoryline
                      data={CashFlowChartData.data.cashOutChart}
                      // domain={{
                      //   x: [new Date(2021,1,1),new Date(2021,30)],//   y: [0,20]
                      // }}
                      interpolation="monotoneX"
                      scale={{ x: "time",y: "linear" }}
                      standalone={falsE}
                      style={{
                        data: { stroke: 'red' },parent: { border: '1px solID #ccc' },}} />

                    <Victoryline
                      data={CashFlowChartData.data.cashInChart}
                      // domain={{
                      //   x: [new Date(2021,y: "linear" }}
                      standalone={falsE}
                      style={{
                        data: { stroke: 'green' },}} />

                  </VictoryChart>
                ) : null}
              </VIEw>
            </touchabLeopacity>
          )}
      </VIEw>

样本数据集：

{"messageCode":{"code":1,"message":"success"},"data":{"cashInChart":[{"x":"2021-02-23","y":88136.39},{"x":"2021-02-24","y":3136.39},{"x":"2021-02-25","y":42442329.14},{"x":"2021-02-26","y":46631639.89},{"x":"2021-02-27","y":42020950.64},{"x":"2021-02-28","y":47379660.39},{"x":"2021-03-01","y":24370.14},{"x":"2021-03-02","y":596.39},{"x":"2021-03-03","y":822.64},{"x":"2021-03-04","y":49033048.89},{"x":"2021-03-05","y":48584275.14},{"x":"2021-03-06","y":50198914.64},{"x":"2021-03-07","y":51917656.64},{"x":"2021-03-08","y":52657548.64},{"x":"2021-03-09","y":70887.39},{"x":"2021-03-10","y":59284226.14},{"x":"2021-03-11","y":04554.89},{"x":"2021-03-12","y":56924883.64},{"x":"2021-03-13","y":72040.39},{"x":"2021-03-14","y":307.14},{"x":"2021-03-15","y":57944825.89},{"x":"2021-03-16","y":44.64},{"x":"2021-03-17","y":60319624.14},{"x":"2021-03-18","y":61517903.64},{"x":"2021-03-19","y":28652.64},{"x":"2021-03-20","y":32690.64},{"x":"2021-03-21","y":36728.64},{"x":"2021-03-22","y":0766.64},{"x":"2021-03-23","y":40758.64}],"cashOutChart":[{"x":"2021-02-23","y":0},"y":500.00},"y":10.00},"y":0}],"ID":0}}

解决方法

<VictoryAxis style={{ tickLabels: { angle: 0 } }} fixLabelOverlap={truE} />

大佬总结

以上是大佬教程为你收集整理的胜利图表 X 轴标签应按周分组并防止重叠全部内容，希望文章能够帮你解决胜利图表 X 轴标签应按周分组并防止重叠所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。