Chart.js柱状图在iPhone上颜色不显示，仅hover时WAY系列变色

算力阿峰

2026-5-28

问题描述

我开发的Chart.js柱状图在桌面端渲染正常，但在iPhone设备上，图表柱子显示为黑色，仅当hover时WAY系列柱子才会变为正确颜色。该图表在Chrome手机调试器中显示正常，但在iPhone的Firefox和Chrome浏览器中均存在此问题。相关代码如下：

<div class="col-sm"> 
  <canvas id="WayChart" width="300" height="300"></canvas> 
  <!-- max-width="100%" --> 
  <script> 
    var densityCanvas = document.getElementById("WayChart"); 
    Chart.defaults.global.defaultFontSize = 18; 
    Chart.defaults.global.defaultFontColor='black'; 
    var controlData = { 
      label: 'Control', 
      data: [5.0,4.2,5.6], 
      backgroundColor: 'rgba(144,18,179)', 
      borderWidth: 0, 
      yAxisID: "WAY Depth" 
    }; 
    var wayData = { 
      label: 'WAY', 
      data: [5.3,2.5,2.6], 
      backgroundColor: 'rgba(0,166,104)', 
      borderWidth: 0, 
      yAxisID: "WAY Depth" 
    }; 
    var daysData = { 
      labels: ["Day 0", "Day 28", "Day 56"], 
      datasets: [controlData, wayData], 
    }; 
    var chartOptions = { 
      responsive:true, 
      scales: { 
        xAxes: [{ 
          barPercentage: 1, 
          categoryPercentage: 0.5, 
          ticks: { fontStyle:'bold' } 
        }], 
        yAxes: [{ 
          id: "WAY Depth", 
          scaleLabel:{ 
            display:true, 
            labelString:'Depth (mm)', 
            fontStyle:'bold', 
          }, 
          ticks: { beginAtZero: true } 
        }] 
      }, 
      title:{ 
        display:'true', 
        text:'Depth Measurements (mm)', 
        fontSize:18 
      } 
    }; 
    var barChart = new Chart(WayChart, { 
      type: 'bar', 
      data: daysData, 
      options: chartOptions 
    }); 
  </script> 
</div> 
</div>

解决思路

我之前碰到过几乎一模一样的iOS端Chart.js渲染问题，大概率是以下几个原因导致的，你可以逐一排查：

修复RGBA颜色格式：你当前的backgroundColor只传入了RGB三个分量，标准的RGBA语法需要第四个透明度参数（取值范围0-1）。虽然桌面浏览器和Chrome调试器能自动补全默认值，但iOS上的WebKit内核浏览器（Chrome、Safari）以及Firefox对这种不完整的RGBA解析存在兼容性问题，会导致柱子显示为黑色。把颜色值改成完整的RGBA格式即可，比如：
```
var controlData = {
  // ...其他属性
  backgroundColor: 'rgba(144,18,179, 1)', // 最后一个1表示完全不透明
  // ...其他属性
};
var wayData = {
  // ...其他属性
  backgroundColor: 'rgba(0,166,104, 1)',
  // ...其他属性
};
```
升级Chart.js版本：如果你使用的是较旧版本的Chart.js，可能存在移动端特定的渲染Bug。建议升级到最新的稳定版，新版本通常会修复这类跨浏览器兼容性问题。
检查borderWidth设置：虽然可能性较低，但可以尝试移除borderWidth: 0，改为borderWidth: 1或者直接删除该属性。部分移动端浏览器对border为0的柱状图渲染逻辑可能有特殊处理，hover时Chart.js会覆盖样式所以显示正常。

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