如何在CanvasJS柱状图中根据查询值为指定列设置自定义颜色？

要实现根据指定值为柱状列设置颜色，有两种简洁的实现方式：

方式一：后端PHP直接注入颜色属性 #

在生成数据数组时，判断当前项的x值是否匹配目标值，直接为其添加color属性，CanvasJS会自动识别该属性并渲染对应颜色。

修改后的PHP代码：

<?php 
        
    $jsonArray = array(); // 创建列数据数组
    
    $sql = mysqli_query($conn, "SELECT DataAssistenza, COUNT(Arredatore) as y,
    Arredatore as x FROM assistenze WHERE YEAR(DataAssistenza) = YEAR(NOW())
    AND MONTH(DataAssistenza) = MONTH(NOW()) GROUP BY Arredatore ORDER BY Arredatore");
    
    $targetValue = 'SpecificValue'; // 替换为你需要匹配的目标值
    while ($row = $sql->fetch_assoc()){
            $jsonArrayItem['y'] = $row['y']; // 数值
            $jsonArrayItem['label'] = $row['x']; // 人员名称
            // 匹配目标值时设置红色
            if($row['x'] === $targetValue){
                $jsonArrayItem['color'] = '#ff0000';
            }
            array_push($jsonArray, $jsonArrayItem); // 将数据项加入数组
             
    }

?>

前端JS代码无需修改，直接使用原逻辑即可。

方式二：前端JS遍历数据设置颜色 #

如果不想修改后端逻辑，可以在前端获取数据后，遍历dataPoints为目标项添加颜色属性：

修改后的JS代码：

window.onload = function() {
    // 获取后端传递的原始数据
    let dataPoints = <?php echo json_encode($jsonArray, JSON_NUMERIC_CHECK); ?>;
    const targetValue = 'SpecificValue'; // 替换为目标值
    
    // 遍历数据点，为匹配项设置颜色
    dataPoints.forEach(point => {
        if(point.label === targetValue){
            point.color = '#ff0000'; // 红色
        }
    });
 
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: ""
        },
        axisY: {
            title: "Numero Assistenze"
        },
        data: [{
            type: "column",
            yValueFormatString: "##",
            dataPoints: dataPoints
        }]
    });
    chart.render();
}

两种方式的选择建议：

• 若颜色规则固定，优先选择后端处理，减少前端逻辑开销
• 若颜色规则需要根据前端状态动态调整，使用前端遍历的方式更灵活

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