如何修改Material UI BarChart中指定柱状条（最高/最低值）的颜色？

问题描述 #

我使用以下代码创建柱状图：

const namesArray = Object.values(tableData).map(item => item.name);
const valuesArray = Object.values(tableData).map(item => item.value);

return (
  <Box>
    <SimpleCard title="Cell Voltages">
      <BarChart
        width={750}
        height={300}
        series={[
          { data:valuesArray, id: 'cId'},
        ]}
        xAxis={[{ data: namesArray, scaleType: 'band' }]}
      />
    </SimpleCard>
  </Box>
);

当前输出图表：

需要修改图表中最高值和最低值对应柱子的颜色，但未找到可行方法，求实现方案。

解决方案 #

1. 计算数据中的最大值和最小值 #

先从数据数组中提取所有值的最大、最小值，作为后续颜色判断的依据：

const valuesArray = Object.values(tableData).map(item => item.value);
const maxValue = Math.max(...valuesArray);
const minValue = Math.min(...valuesArray);

2. 自定义柱子颜色逻辑 #

修改BarChart的series配置，给color属性传入回调函数，根据当前柱子的值判断是否为最高/最低值，返回对应颜色：

<BarChart
  width={750}
  height={300}
  series={[
    {
      data: valuesArray,
      id: 'cId',
      color: (params) => {
        // params包含当前项的value、index等信息
        if (params.value === maxValue) {
          return '#27ae60'; // 自定义最高值柱子颜色
        }
        if (params.value === minValue) {
          return '#c0392b'; // 自定义最低值柱子颜色
        }
        return '#3498db'; // 默认柱子颜色
      }
    },
  ]}
  xAxis={[{ data: namesArray, scaleType: 'band' }]}
/>

适配其他图表库的补充说明 #

如果使用的是Recharts等其他React图表库，逻辑类似：找到支持单条颜色自定义的属性，通过值判断返回对应颜色。例如Recharts的写法：

<Bar 
  dataKey="value" 
  fill={(entry) => entry.value === maxValue ? '#27ae60' : entry.value === minValue ? '#c0392b' : '#3498db'} 
/>

内容的提问来源于stack exchange，提问作者Divyanshu Bhujbal