如何在Data Studio可视化中无需HTML代码加载Google Charts库

浏览器端纯JS实现 #

可以通过动态创建script元素的方式加载Google Charts的loader脚本，无需在HTML里预先写<script>标签，代码示例如下：

// 动态创建script标签
const script = document.createElement('script');
script.src = 'https://www.gstatic.com/charts/loader.js';
script.type = 'text/javascript';

// 监听脚本加载完成事件，确保google对象可用后再初始化图表
script.onload = function() {
  // 加载corechart包
  google.charts.load('current', {'packages':['corechart']});
  // 包加载完成后执行绘制逻辑
  google.charts.setOnLoadCallback(function() {
    // 构造图表数据
    const data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work', 11],
      ['Eat', 2],
      ['Commute', 2],
      ['Watch TV', 2],
      ['Sleep', 7]
    ]);

    // 图表配置选项
    const options = {
      title: '日常活动时间分布'
    };

    // 创建饼图实例并绘制（需确保页面存在id为chart_div的元素）
    const chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  });
};

// 将script标签添加到页面头部，触发加载
document.head.appendChild(script);

这个逻辑类似Python里动态导入模块，只有当loader脚本加载完成后，google对象才会被定义，避免报错。

Node.js环境实现（后端生成图表） #

如果是在Node.js环境下使用Google Charts（比如生成图表图片/HTML），可以借助第三方包google-charts-node来模拟浏览器环境加载库：

1. 先安装依赖：

npm install google-charts-node

2. 示例代码：

const GoogleChartsNode = require('google-charts-node');

async function generateChart() {
  // 渲染图表并生成HTML
  const chartHtml = await GoogleChartsNode.render(`
    // 构造数据和绘制逻辑，和浏览器端一致
    const data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work', 11],
      ['Eat', 2],
      ['Commute', 2],
      ['Watch TV', 2],
      ['Sleep', 7]
    ]);

    const options = {
      title: '日常活动时间分布'
    };

    const chart = new google.visualization.PieChart(document.createElement('div'));
    chart.draw(data, options);
  `);

  // 后续可将chartHtml保存为文件，或转换为图片输出
  console.log(chartHtml);
}

generateChart();

关键注意事项 #

• 无论哪种方式，必须等待Google Charts的loader脚本完全加载完成后，才能调用google.charts相关API，否则依然会出现google is not defined的错误，这和Python/C++中必须先导入/链接库才能使用是同一个逻辑。
• 浏览器端使用时，要确保绘制图表的目标DOM元素（比如示例中的chart_div）已经存在于页面中，否则无法渲染图表。

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