Chartist.js饼图如何设置扇区颜色，以#0099ff为最大值起始色

实现逻辑 #

要实现同色系明暗区分的效果，核心是固定色相和饱和度，仅通过调整亮度匹配数值大小：

1. 首先将目标色#0099ff转换为HSL基准值：色相204°，饱和度100%，亮度50%，该参数对应原始的#0099ff，直接用于最大值对应的扇区
2. 预计算series数组的最大值，作为亮度比例计算的基准
3. 数值越小的扇区，亮度越低，可自定义最低亮度避免颜色过黑无法识别

完整代码示例 #

// 可变长度的series数据
const series = [12, 35, 8, 49, 21];
// 计算series最大值
const maxValue = Math.max(...series);
// 基础HSL配置 对应#0099ff
const BASE_HUE = 204;
const BASE_SATURATION = 100;
// 亮度范围：最小值对应20%亮度，最大值对应50%亮度，可按需调整
const MIN_LIGHTNESS = 20;
const MAX_LIGHTNESS = 50;

new Chartist.Pie('.ct-chart', {
  series: series
}, {
  // 其他饼图配置按需补充
}).on('draw', function(data) {
  if (data.type === 'slice') {
    // 计算当前数值占最大值的比例
    const valueRatio = data.value / maxValue;
    // 按比例计算当前扇区的亮度值
    const currentLightness = MIN_LIGHTNESS + (MAX_LIGHTNESS - MIN_LIGHTNESS) * valueRatio;
    // 设置填充色
    data.element.attr({
      style: `fill: hsl(${BASE_HUE}, ${BASE_SATURATION}%, ${currentLightness}%);`
    });
  }
});

可选调整 #

如果需要数值越小的扇区颜色越亮，只需要调换MIN_LIGHTNESS和MAX_LIGHTNESS的赋值即可。

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