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

问题描述

我是 react-native-chart-kit for barchar 我想在图表中显示按月计算的数据,但是当我在图表中设置数据时,它正在切割。看我分享图片代码

const data = {
  labels: [
    'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',],datasets: [
    {
      data: [
        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,decimalPlaces: 0,style: {
                  fontFamily: env.fontRegular,propsForLabels: {
                  fontFamily: env.fontRegular
                },}}
              style={{
                marginVertical: 8,borderRadius: 16,}}
            />

enter image description here

解决方法

对此的一种可能解决方案是在 barPercentage 上将 chartConfig 设置为小于 1 的值。这将使条形变小,同时仍将它们散布在可用空间中。

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

相关问答

Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其...
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。...
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbc...