BarChart如何设置占比低于20%的柱为红色并固定Y轴最大值为100

算力阿峰

2026-9-2

实现方法

你使用的是`react-native-chart-kit`的BarChart组件，两个需求按如下修改即可：

1. 占比低于20%的柱体显示红色

组件支持单柱自定义颜色，不需要修改全局颜色配置，按三步调整：

第一步：组装chartData时，在数据集里新增colors字段，按每个柱对应的百分比判断返回颜色

// 构造chartData参考代码
chartData: {
  labels: this.state.labels,
  datasets: [
    {
      data:  /* 你原来的柱体数值数组 */,
      // 按百分比匹配对应颜色
      colors: this.state.procent.map(percent => {
        return (opacity = 1) => percent < 20 
          ? `rgba(255, 0, 0, ${opacity})` 
          : `rgba(0, 0, 0, ${opacity})`
      })
    }
  ]
}

第二步：修改chartConfig配置，开启从数据集读取颜色

const chartConfig = {
  backgroundGradientFrom: "#fff",
  backgroundGradientTo: "#fff",
  color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
  strokeWidth: 1,
  barPercentage: 0.75,
  // 把原来的false改成true
  useShadowColorFromDataset: true
};

第三步：给BarChart组件新增props，开启单柱自定义颜色能力

<BarChart
  style={{marginBottom: -20}}
  data={this.state.chartData}
  width={screenWidth - 40}
  height={220}
  chartConfig={this.state.chartConfig}
  verticalLabelRotation={30}
  // 新增下面这行
  withCustomBarColorFromData={true}
/>

2. 固定Y轴最大值为100

直接在chartConfig里添加Y轴范围配置即可，强制Y轴从0到100，可按需设置刻度间隔：

const chartConfig = {
  backgroundGradientFrom: "#fff",
  backgroundGradientTo: "#fff",
  color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
  strokeWidth: 1,
  barPercentage: 0.75,
  useShadowColorFromDataset: true,
  // 新增Y轴范围配置
  yAxisMinimum: 0,
  yAxisMaximum: 100,
  // 刻度间隔，设为20时Y轴显示0/20/40/60/80/100，可自行调整
  yAxisInterval: 20,
  // 避免Y轴出现小数刻度
  formatYLabel: value => Math.round(value).toString()
};