Chart.js：遍历数据集并根据数据值分配点背景色

没问题，这事儿其实很简单，咱们分两种常见场景来实现，直接上代码和思路：

固定数据值对应固定颜色 #

如果你的需求是某个具体数值就对应某一种固定颜色（比如值1用红色、值2用橙色，以此类推），可以直接遍历数据数组，根据数值匹配intColors里的对应颜色：

// 你的原始数据数组
$data = [7, 2, 5, 6, 5, 6, 7, 5, 6, 4, 1, 2, 7, 1, 2, 1, 2];
// 预设的颜色数组，可根据你的数值范围调整顺序和颜色值
$intColors = ['#ff4444', '#ffbb33', '#00C851', '#33b5e5', '#2bbbad', '#aa66cc', '#8800cc'];

// 生成与数据一一对应的点颜色数组
$pointColors = [];
foreach ($data as $value) {
    // 这里假设数值1对应颜色数组的第0项，数值2对应第1项，以此类推
    // 如果你的数值和索引对应关系不同，直接调整这个计算逻辑就行
    $colorIndex = $value - 1;
    // 加个兜底，防止数值超出颜色数组范围时显示默认灰色
    $pointColors[] = isset($intColors[$colorIndex]) ? $intColors[$colorIndex] : '#999999';
}

// 把颜色数组注入到你的图表数据集参数里
$arrDataSets['pointBackgroundColor'] = $pointColors;

按数值范围分配颜色 #

如果是根据数值区间来分配颜色（比如小于3用警告色、3-5用中性色、大于5用成功色），就用条件判断来匹配：

// 你的原始数据数组
$data = [7, 2, 5, 6, 5, 6, 7, 5, 6, 4, 1, 2, 7, 1, 2, 1, 2];
// 预设的区间对应颜色：低数值、中数值、高数值
$intColors = ['#ff4444', '#ffbb33', '#00C851'];

$pointColors = [];
foreach ($data as $value) {
    if ($value < 3) {
        // 数值小于3，用第一个颜色
        $pointColors[] = $intColors[0];
    } elseif ($value >= 3 && $value <= 5) {
        // 数值在3-5之间，用第二个颜色
        $pointColors[] = $intColors[1];
    } else {
        // 数值大于5，用第三个颜色
        $pointColors[] = $intColors[2];
    }
}

// 注入到数据集参数
$arrDataSets['pointBackgroundColor'] = $pointColors;

核心思路就是生成一个和原始数据长度完全一致的颜色数组，每个位置的颜色对应同位置的数据值，最后把这个颜色数组赋值给$arrDataSets里的pointBackgroundColor字段就行，图表渲染时会自动一一对应每个数据点的颜色。

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