Google Charts条形图getImageURI报错，如何获取PNG图片链接？

嘿，这个问题我遇过！报错chart.getImageURI is not a function的核心原因是你用的是Material风格的条形图（google.charts.Bar），这个版本的图表实例并没有提供getImageURI()方法——只有经典版的Google Charts图表才支持这个生成图片链接的API。下面给你两种解决方案：

方案一：切换到经典版条形图（推荐，改动最小） #

只需要把Material风格的图表实例替换成经典版的google.visualization.BarChart，同时调整加载的包和配置选项即可：

// 加载经典图表包（corechart包含所有经典图表类型）
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // 数据部分保持不变
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  // 调整为经典版的配置选项
  var options = {
    title: 'Company Performance',
    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
    bars: 'vertical' // 指定条形方向（可选，默认也是垂直）
  };

  // 创建经典版BarChart实例
  var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

  // 绑定ready事件生成图片链接（这部分逻辑你原来的是对的）
  google.visualization.events.addListener(chart, 'ready', function() {
    document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '" target="_blank">Printable version</a>';
  });

  // 绘制图表
  chart.draw(data, options);
}

方案二：保留Material风格（需额外处理） #

如果你一定要保留Material风格的条形图，由于它本身不支持getImageURI()，可以借助第三方截图库（比如html2canvas）来生成图表的PNG图片。步骤如下：

1. 引入html2canvas库
2. 在图表的ready事件中，用html2canvas捕获图表容器，生成图片链接

示例代码片段：

// 假设你已经引入了html2canvas
google.visualization.events.addListener(chart, 'ready', async function() {
  const chartContainer = document.getElementById('chart_div');
  const canvas = await html2canvas(chartContainer);
  const imageURI = canvas.toDataURL('image/png');
  document.getElementById('png').innerHTML = '<a href="' + imageURI + '" target="_blank">Printable version</a>';
});

不过这个方案需要额外引入依赖，而且截图效果可能受样式影响，所以优先推荐方案一。

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