问题描述
我是 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,}}
/>
解决方法
对此的一种可能解决方案是在 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,}}
/>