react-native - react-native-chart-kit 条形图图形切割

Question

我react-native-chart-kit支持 barchar，我想在图表中显示月份数据，但是当我在图表中设置数据时，它正在削减。看我分享的图片和代码

const data = {
  labels: [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ],
  datasets: [
    {
      data: [
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
        Math.random() * 100,
      ],
      color: (opacity = 1) => `rgba(192, 112, 47, ${opacity})`,
    },
  ],
};

<BarChart
              width={width}
              height={height}
              data={data}
              yLabelsOffset={25}

              chartConfig={{
                backgroundColor: colors.blank,
                backgroundGradientFrom: colors.blank,
                backgroundGradientTo: colors.blank,
                color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
                decimalPlaces: 0,
                style: {
                  fontFamily: env.fontRegular,
                },
                propsForLabels: {
                  fontFamily: env.fontRegular
                },
              }}
              style={{
                marginVertical: 8,
                borderRadius: 16,
              }}
            />

Answer 1

一种可能的解决方案是将 设置barPercentage为小于 1 on 的值chartConfig。这将使条形更小，同时仍将它们分布在可用空间中。

    <BarChart
      width={windowWidth}
      height={300}
      data={data}
      yLabelsOffset={25}
      chartConfig={{
        color: (opacity = 1) => `rgba(255, 255, 255, ${opacity})`,
        decimalPlaces: 0,
        style: {},
        propsForLabels: {},
        barPercentage: .3
      }}
      style={{
        marginVertical: 8,
        borderRadius: 16,
      }}
    />