使用Puppeteer渲染Google图表 [英] Render Google Charts with Puppeteer
问题描述
我正在尝试找到将Puppeteer和GoogleCharts库相结合以渲染条形图并导出该图的PNG图像的正确方法.
I am trying to figure ou the proper way to combine Puppeteer and the GoogleCharts library to render Bar charts and export a PNG image of the chart.
主要受Puppeteer文档启发的基本布局似乎就是这样，以创建带有canvas元素的新页面.
The basic layout, mostly inspired by the Puppeteer documentation seems to be something like that, to create a new page with a canvas element.
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setContent(`
<!DOCTYPE html>
<html>
<body>
<canvas id="chart" width="580" height="400"></canvas>
</body>
</html>
`);
await browser.close();
})();
我发现此npm软件包可用于Google图表: https://www.npmjs .com/package/google-charts . chart.draw方法似乎接受一个DOM元素，它将在其中呈现图表.
I have found this npm package to work with Google Charts: https://www.npmjs.com/package/google-charts. The chart.draw method seems to accept a DOM element in which it will render the chart.
根据该软件包的文档，用法看起来非常简单.
According to the documentation of this package, the usage looks pretty simple.
const pie_1_chart = new GoogleCharts.api.visualization.PieChart(document.getElementById('chart1'));
pie_1_chart.draw(data);
如何执行draw方法，以使其在人偶页面的#canvas DOM元素内呈现图表?
How can I execute the draw method so that it render the chart inside the #canvas DOM element of the Puppeteer's page ?
此外，如果您能举例说明将页面/画布导出为PNG图像的正确方法，将不胜感激.
Also, if you could give me an example of the proper way to export the page/canvas as a PNG image, that would be very appreciated.
注意:我浏览了很多东西，找到了一个可以实现我想要实现的功能的库/程序包，但是我能找到的最接近的是用于Chart.JS的TypeScript程序包: https://github.com/SeanSobey/ChartjsNodePuppeteer .我对TypeScript/ES6不熟悉，所以我不知道如何调整该库以使其与Google Charts库而不是Chart.JS一起使用.
NOTE: I browsed a lot to find an existing library/package that would do what I am trying to achieve, but the closest I could found is a TypeScript package for Chart.JS: https://github.com/SeanSobey/ChartjsNodePuppeteer. I am not familiar with TypeScript/ES6, so I don't know how I could adapt this library to make it work with the Google Charts library instead of Chart.JS.
谢谢
推荐答案
I had this same problem and baked it into an open-source library called Google Charts Node.
这是一个用法示例:
const GoogleChartsNode = require('google-charts-node');
// Define your chart drawing function
function drawChart() {
const data = google.visualization.arrayToDataTable([
['City', '2010 Population',],
['New York City, NY', 8175000],
['Los Angeles, CA', 3792000],
['Chicago, IL', 2695000],
['Houston, TX', 2099000],
['Philadelphia, PA', 1526000]
]);
const options = {
title: 'Population of Largest U.S. Cities',
chartArea: {width: '50%'},
hAxis: {
title: 'Total Population',
minValue: 0
},
vAxis: {
title: 'City'
}
};
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,
});
render方法返回包含此图像的缓冲区:
The render method returns a buffer that contains this image:
它可以在NPM上作为 google-charts-node 使用.
It's available on NPM as google-charts-node.
关于使用Puppeteer进行渲染的一般问题，我发现它相当简单.我尝试尽可能使用图表提供的方法getImageURI，但并非所有图表都支持它.在这种情况下，我会使用Puppeteer截屏.
Regarding the general problem of rendering with Puppeteer, I found it to be fairly straightforward. I try to use the charts-provided method getImageURI whenever possible, but not all charts support it. In that case, I take a screenshot using Puppeteer.
这是基本逻辑(另请查看完整的源代码):
Here is the basic logic (also check out the full source code):
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;
}
这篇关于使用Puppeteer渲染Google图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
