Google饼图可视化：用变量传颜色在移动端报无效颜色错误

问题场景 #

使用Google Visualization Charts饼图组件时，通过CSS自定义属性加载十六进制颜色值配置饼图：

• 桌面端Firefox正常运行
• 移动端Chrome抛出「Invalid color: ...」错误
• 直接传入字符串格式的十六进制颜色，两端都能正常工作

排查思路 #

• 处理首尾空格：getPropertyValue在不同浏览器返回的字符串可能带空格，移动端Chrome可能保留了这些空格，导致颜色值格式无效。给每个颜色值添加trim()处理：

  colorone = style.getPropertyValue('--color-graphics-one').trim();
  

• 验证自定义属性有效性：在移动端Chrome的DevTools中查看section-header元素的计算样式，确认自定义属性是否正确返回了预期的十六进制值，排查是否存在属性名拼写错误、样式未继承等问题。

• 检查颜色值格式规范：确保CSS中定义的自定义属性值是标准十六进制格式（如#e0440e），不要带引号、空格或其他多余字符。部分构建工具或预处理器可能会给颜色值添加额外字符，导致移动端解析异常。

• 调整执行时机：移动端Chrome可能在DOM或样式未完全加载时执行drawChart，导致getComputedStyle获取不到正确值。可以将图表初始化逻辑放在DOMContentLoaded事件中：

  document.addEventListener('DOMContentLoaded', function() {
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  });
  

• 添加颜色格式校验：主动验证颜色值是否符合十六进制规范，无效时返回默认色避免报错：

  const hexRegex = /^#([0-9A-F]{3}|[0-9A-F]{6})$/i;
  function checkColor(color) {
    const cleanColor = color.trim();
    return hexRegex.test(cleanColor) ? cleanColor : '#000';
  }
  // 使用示例
  colorone = checkColor(style.getPropertyValue('--color-graphics-one'));
  

修正后的代码示例 #

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['mass', 'percentage'],
    ['var',     40],
    ['vartwo',      30],
    ['varthree',  15],
    ['varfour',  15],
  ]);

  // 获取颜色并处理空格
  var element = document.getElementById('section-header');
  var style = window.getComputedStyle(element);
  
  var colorone = style.getPropertyValue('--color-graphics-one').trim();
  var colortwo = style.getPropertyValue('--color-graphics-two').trim();
  var colorthree = style.getPropertyValue('--color-graphics-three').trim();
  var colorfour = style.getPropertyValue('--color-graphics-four').trim();
  var colorfive = style.getPropertyValue('--color-graphics-five').trim();

  var colors = [colorone, colortwo, colorthree, colorfour, colorfive];

  var options = {
    title: 'Diesen Projektfokus planen wir',
    backgroundColor: 'transparent',
    colors: colors,
    legend: { position: 'bottom', alignment: 'center' },
  };

  var chart = new google.visualization.PieChart(document.getElementById('piecharttwo'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="section-header" style="--color-graphics-one: #e0440e; --color-graphics-two: #e6693e; --color-graphics-three: #ec8f6e; --color-graphics-four: #f3b49f; --color-graphics-five: #f6c7b6;"></div>
<div id="piecharttwo" style="display: block; width: max-width; height: 300px;"></div>

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