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

Question

我是barchar的react-native-chart-kit，我想在图表中显示按月显示的数据，但当我在图表中设置数据时，它是剪切的。看看我分享的图片&代码

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

一种可能的解决方案是在chartConfig上将barPercentage设置为小于1的值。这将使条形图变得更小，同时仍然在可用空间中展开它们。

    <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,
      }}
    />