如何选择基于哈希的MUI调色板“随机”颜色？

如果你需要给MUI图表系列或多值组件中的值分配适配MUI风格的确定性颜色（同一值始终对应同一种颜色，且无需语义属性），可以按照以下步骤实现：

核心思路 #

通过将输入值转换为哈希值，再映射到MUI调色板的颜色列表中，既保证颜色与MUI风格统一，又实现同一值对应固定颜色的需求。

1. 实现简单的字符串哈希函数 #

把任意值（字符串、数字等）转换为唯一的整数，确保同一输入得到相同输出：

const stringHash = (str) => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
    hash = hash & hash; // 转为32位整数
  }
  return Math.abs(hash);
};

2. 构建适配MUI的颜色列表 #

从MUI主题调色板中提取符合需求的颜色，可根据需要调整数量和类型：

const getMuiColorPalette = (theme) => {
  // 筛选MUI调色板中无强语义或适配性强的颜色，也可加入自定义颜色
  return [
    theme.palette.primary.main,
    theme.palette.secondary.main,
    theme.palette.info.main,
    theme.palette.neutral[500],
    theme.palette.neutral[700],
    theme.palette.primary.light,
    theme.palette.secondary.light,
    theme.palette.info.light
  ];
};

3. 哈希值映射到颜色 #

将输入值的哈希值对颜色列表长度取模，得到对应颜色：

const getColorForValue = (value, theme) => {
  const strValue = String(value); // 统一转为字符串处理
  const hash = stringHash(strValue);
  const colorPalette = getMuiColorPalette(theme);
  return colorPalette[hash % colorPalette.length];
};

4. 在组件中使用 #

以MUI X图表为例，给每个系列分配对应颜色：

import { LineChart } from '@mui/x-charts';

// 假设data是你的数据源，每个item包含category字段作为区分值
<LineChart
  series={data.map(item => ({
    data: item.values,
    color: getColorForValue(item.category, theme),
  }))}
/>

优化建议 #

• 如果颜色数量不足，可以扩展颜色列表：加入@mui/material/colors中的预定义色系（如deepPurple、teal等），或使用MUI色调的不同变体（如dark、shade）。
• 若需降低不同值映射到同一颜色的概率，可增加颜色列表长度，或使用更复杂的哈希函数（但简单哈希已足够满足大部分场景）。

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