使用Google Charts开发Looker Studio自定义可视化页面空白问题

以下是针对你遇到的Google Charts本地预览空白问题的具体排查方向和解决方法：

• 确保脚本加载顺序正确
  动态添加Google Charts脚本时，必须等待脚本完全加载后再执行初始化逻辑。直接在添加脚本后调用google.charts.load()会因为脚本未加载完成而失效，正确写法如下：

  const script = document.createElement('script');
  script.src = 'https://www.gstatic.com/charts/loader.js';
  script.onload = () => {
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);
  };
  document.head.appendChild(script);
  

• 检查图表容器尺寸设置
  Google Charts需要明确的宽高才能渲染，空白页面大概率是容器未设置尺寸导致的。给容器添加CSS样式：

  #chart-container {
    width: 100%;
    height: 400px;
    min-height: 300px;
  }
  

  初始化图表前可以通过document.getElementById('chart-container')确认元素是否已正确挂载到DOM中。

• 验证数据格式合规性
  Google Charts对数据格式有严格要求，折线图必须使用DataTable或符合规范的数组格式构造数据，示例如下：

  function drawChart() {
    const data = new google.visualization.DataTable();
    data.addColumn('string', '日期');
    data.addColumn('number', '数值');
    data.addRows([
      ['周一', 100],
      ['周二', 150],
      ['周三', 80]
    ]);
    const options = { title: '示例折线图' };
    const chart = new google.visualization.LineChart(document.getElementById('chart-container'));
    chart.draw(data, options);
  }
  

• 适配Looker Studio生命周期
  Looker Studio自定义可视化有特定的生命周期钩子（如update、draw方法），需确保Google Charts的初始化逻辑放在正确的钩子函数中执行，而非全局作用域直接调用。同时注意遵守Looker Studio的内容安全策略，优先使用官方CDN加载脚本。

• 优先使用官方CDN而非npm包
  部分npm封装的google-charts包可能存在浏览器环境兼容性问题，或需要额外配置才能正常工作。建议直接使用官方CDN加载loader.js，这是最可靠的方式。

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