如何在Chart.js水平条形图中为同一条形设置两种不同颜色？

我来帮你搞定这个双色条形的需求！要实现单条数值超过150的部分变红、剩余部分保持灰色的效果，最直观且易维护的方法是用两个堆叠的数据集来模拟分段颜色，而不是直接修改单个条形的背景色。下面是具体的实现步骤和代码修改方案：

核心思路 #

把每个数值拆成两段：

• 第一段：取数值和150的较小值（即≤150的部分），用灰色显示
• 第二段：取数值减去150的差值（如果差值为负则取0，即超过150的部分），用红色显示
  然后让这两个数据集在同一个标签下堆叠，视觉上就呈现出单条双色的效果。

代码修改步骤 #

1. 预处理数据（PHP部分） #

首先在PHP里生成两个新的数组，分别对应灰色段和红色段的数据：

<?php
// 生成灰色段数据：min(数值, 150)
$grayValues = [];
// 生成红色段数据：max(数值 - 150, 0)
$redValues = [];
foreach ($valueArr as $val) {
    $grayValues[] = min((int)$val, 150);
    $redValues[] = max((int)$val - 150, 0);
}
?>

2. 修改Chart.js配置（JS部分） #

接下来调整图表的数据集和选项，开启堆叠模式：

<script>
let myChart = document.getElementById('myChart').getContext('2d');
// Global options
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = '#666';

// 注意：如果你的Chart.js是v3+版本，类型改为'bar'，并添加indexAxis: 'y'
let chartType = 'horizontalBar'; // v2版本用这个
// let chartType = 'bar'; // v3+版本用这个

let massPopChart = new Chart(myChart, {
 type: chartType,
 data: {
 labels: [
 <?php for ($i = 0; $i < count($phoneNumberArr); $i++) { echo "'$phoneNumberArr[$i]'" . ($i < count($phoneNumberArr) - 1 ? ',' : ''); } ?>
 ],
 datasets: [
 // 灰色段数据集：≤150的部分
 {
 label: 'Belföldi perc (limit)',
 data: [
 <?php for ($i = 0; $i < count($grayValues); $i++) { echo $grayValues[$i] . ($i < count($grayValues) - 1 ? ',' : ''); } ?>
 ],
 backgroundColor: 'rgba(0,0,0,0.6)', // 灰色
 borderWidth: 0,
 hoverBorderWidth: 0
 },
 // 红色段数据集：超过150的部分
 {
 label: 'Túlélés', // 可以改成你需要的标签名
 data: [
 <?php for ($i = 0; $i < count($redValues); $i++) { echo $redValues[$i] . ($i < count($redValues) - 1 ? ',' : ''); } ?>
 ],
 backgroundColor: 'rgba(255,0,0,0.7)', // 红色
 borderWidth: 0,
 hoverBorderWidth: 0
 }
 ],
 },
 options: {
 title: {
 display: false,
 text: 'Összesítő',
 fontSize: 25
 },
 legend: {
 display: true,
 position: 'right',
 labels: {
 fontColor: '#000'
 }
 },
 layout: {
 padding: {
 left: 50,
 right: 0,
 bottom: 0,
 top: 0
 }
 },
 // 开启堆叠模式，让两个数据集在同一位置堆叠
 scales: {
 xAxes: [{
 stacked: true, // v2版本的配置
 ticks: {
 beginAtZero: true
 }
 }],
 yAxes: [{
 stacked: true // v2版本的配置
 }]
 // 如果是v3+版本，scales配置改为：
 // x: {
 //   stacked: true,
 //   beginAtZero: true
 // },
 // y: {
 //   stacked: true
 // }
 }
 }
});
</script>

关键说明 #

• 堆叠配置：必须开启stacked: true，否则两个数据集会并排显示，而不是叠加在一起
• 版本兼容：如果你的Chart.js是v3及以上版本，记得把图表类型改为bar，并添加indexAxis: 'y'，同时调整scales的配置结构（注释里已经标注了v3+的写法）
• 样式优化：我把两个数据集的borderWidth设为0，避免出现多余的边框，你可以根据需求调整

替代方案：自定义绘制（复杂场景） #

如果你的需求更复杂（比如需要动态阈值、多段颜色），可以用Chart.js的afterDraw钩子来自定义绘制条形，但这种方法需要手动计算坐标，实现起来更繁琐，对于你的需求来说，堆叠数据集的方案已经足够简单好用了。

内容的提问来源于stack exchange，提问作者M. Bence