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

Question

我正在开发一个 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, 1, 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, 1, 1), new Date(2021, 1, 30)],
                      //   y: [0, 20]
                      // }}
                      interpolation="monotoneX"
                      scale={{ x: "time", y: "linear" }}
                      standalone={false}
                      style={{
                        data: { stroke: 'green' },
                        parent: { border: '1px solid #ccc' },
                      }} />

                  </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},{"x":"2021-02-24","y":0},{"x":"2021-02-25","y":0},{"x":"2021-02-26","y":0},{"x":"2021-02-27","y":0},{"x":"2021-02-28","y":0},{"x":"2021-03-01","y":0},{"x":"2021-03-02","y":0},{"x":"2021-03-03","y":0},{"x":"2021-03-04","y":0},{"x":"2021-03-05","y":0},{"x":"2021-03-06","y":0},{"x":"2021-03-07","y":0},{"x":"2021-03-08","y":0},{"x":"2021-03-09","y":0},{"x":"2021-03-10","y":0},{"x":"2021-03-11","y":0},{"x":"2021-03-12","y":0},{"x":"2021-03-13","y":0},{"x":"2021-03-14","y":0},{"x":"2021-03-15","y":0},{"x":"2021-03-16","y":0},{"x":"2021-03-17","y":0},{"x":"2021-03-18","y":0},{"x":"2021-03-19","y":500.00},{"x":"2021-03-20","y":0},{"x":"2021-03-21","y":0},{"x":"2021-03-22","y":10.00},{"x":"2021-03-23","y":0}],"id":0}}

Answer 1

尝试使用 fixLabelOverlap={true}

在 <VictoryAxis> 属性中

喜欢：

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

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

Victory Chart X-Axis label should be group by week and prevent overlapping

react-native

victory-charts