php - 如何在 node.js 中加载 Google Charts？

Question

当我尝试在 node.js 中加载 Google Chart 时，没有任何反应。

我尝试加载 first example来自 zombie.js 和 jsdom 中的折线图文档，但图表在任何一种情况下都不会加载。

最终目标是检索生成的图表的 SVG 数据以导出到图像或 PDF 中。因此，如果可以使用替代方法(服务器端使用 node.js 或 PHP)来实现这一点，我愿意接受建议。

注意:我已经使用 gChartPhp 成功生成了一些图表的图像，但是这个项目的要求是嵌入式版本是当前 API 提供的交互版本，导出版本是视觉上与嵌入式相同(显然没有交互)。

编辑:我标记了PhantomJS ，因为这是我最终采用的解决方案。

很抱歉缺少链接，但是垃圾邮件预防机制只允许我发布 2 个。

Answer 1

我迟到了 8 年，但我刚刚发布了一个开源项目 Google Charts Node在 Puppeteer 中呈现图表图像(有点像原始 PhantomJS 解决方案的继承者)。

google-charts-node可以作为 NPM 库使用，可以像这样使用:

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

function drawChart() {
  // Set up your chart here, just like in the browser
  // ...

  const chart = new google.visualization.BarChart(container);
  chart.draw(data, options);
}

// Render the chart to image
const image = await GoogleChartsNode.render(drawChart, {
  width: 400,
  height: 300,
});

现在您可以将这个image 缓冲区保存为文件或将其作为HTTP 响应返回，等等。

创建它非常简单。主要警告是:

1. 并非所有图表都支持 getImageURI，因此当发生这种情况时，我会转而使用 puppeteer 来截取屏幕截图。
2. 它很慢!但是，如果您必须使用 Google Charts 作为一项要求，那么您实际上别无选择。使用足够的云计算资源可以缓解此问题。

您可以在 Github project 查看完整的源代码，但如果你想自己做，这里是原始的木偶操作流程:

async function render() {
  // Puppeteer setup
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Add the chart
  await page.setContent(`...Insert your Google Charts code here...`);

  // Use getImageURI if available (not all charts support)
  const imageBase64 = await page.evaluate(() => {
    if (!window.chart || typeof window.chart.getImageURI === 'undefined') {
      return null;
    }
    return window.chart.getImageURI();
  });

  let buf;
  if (imageBase64) {
    buf = Buffer.from(imageBase64.slice('data:image/png;base64,'.length), 'base64');
  } else {
    // getImageURI was not available - take a screenshot using puppeteer
    const elt = await page.$('#chart_div');
    buf = await elt.screenshot();
  }

  await browser.close();
  return buf;
}