如何调整React Native Chat Kit的BarChart配置实现目标柱状图设计

调整后完整代码 #

组件调用代码 #

<BarChart
  data={chartData}
  width={400}
  height={160}
  chartConfig={chartConfig}
  showValuesOnTopOfBars={true}
  showBarTops={false}
  withHorizontalLabels={true}
  yAxisLabel=""
  yAxisSuffix=""
/>

chartConfig配置代码 #

const chartConfig = {
  backgroundGradientFrom: '#ffffff',
  backgroundGradientTo: '#ffffff',
  backgroundGradientFromOpacity: 1,
  backgroundGradientToOpacity: 1,
  fillShadowGradient: '#4084F4',
  fillShadowGradientOpacity: 1,
  decimalPlaces: 0,
  barPercentage: 0.5,
  spacingInner: 0.7,
  color: () => `#4084F4`,
  labelColor: () => `#666666`,
  withShadow: false,
  // 背景网格线配置
  propsForBackgroundLines: {
    strokeWidth: 1,
    stroke: '#f0f0f0',
    strokeDasharray: '',
  },
  // 柱子圆角配置
  propsForBar: {
    rx: 4,
    ry: 4,
  },
  // 顶部数值样式配置
  propsForLabels: {
    fontSize: 12,
    fontWeight: '500',
  }
};

核心调整说明 #

• 开启X轴底部标签显示：将withHorizontalLabels从false改为true，即可展示每个柱子对应的分类名称
• 新增柱子圆角属性：通过propsForBar传入rx、ry参数，给柱子顶部添加圆角，匹配设计的圆角样式
• 调整背景网格样式：修改propsForBackgroundLines配置，添加浅色横向网格线，还原设计的背景结构
• 优化文字样式：将底部标签颜色调整为浅灰色，同时通过propsForLabels自定义顶部数值的字体大小、字重，符合设计的文字规范

内容的提问来源于stack exchange，提问作者Mukash Wasti