首頁猿問使用 Puppeteer 渲染谷歌圖表

使用 Puppeteer 渲染谷歌圖表

JavaScript

慕娘9325324 2021-12-02 10:20:37

我正在嘗試找出將 Puppeteer 和 GoogleCharts 庫結合起來以呈現條形圖并導出圖表的 PNG 圖像的正確方法。主要受 Puppeteer 文檔啟發的基本布局似乎是這樣的，用于創建一個帶有畫布元素的新頁面。(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 Charts 一起使用：https : //www.npmjs.com/package/google-charts。該chart.draw方法似乎接受一個 DOM 元素，它將在其中呈現圖表。根據這個包的文檔，用法看起來很簡單。const pie_1_chart = new GoogleCharts.api.visualization.PieChart(document.getElementById('chart1'));pie_1_chart.draw(data);如何執行 draw 方法，以便它#canvas在 Puppeteer 頁面的DOM 元素內呈現圖表？另外，如果您能給我一個將頁面/畫布導出為 PNG 圖像的正確方法的示例，我將不勝感激。注意：我瀏覽了很多東西以找到一個現有的庫/包，它可以完成我想要實現的目標，但我能找到的最接近的是 Chart.JS 的 TypeScript 包：https : //github.com/SeanSobey/ChartjsNodePuppeteer。我不熟悉 TypeScript/ES6，所以我不知道如何調整這個庫以使其與 Google Charts 庫而不是 Chart.JS 一起使用。

查看完整描述

3 回答

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

我遇到了同樣的問題，并將其放入一個名為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方法返回一個包含此圖像的緩沖區：

它在 NPM 上以google-charts-node 的形式提供。

關于使用 Puppeteer 渲染的一般問題，我發現它相當簡單。我盡量使用圖表提供的方法getImageURI，但并非所有圖表都支持它。在這種情況下，我使用 Puppeteer 截取屏幕截圖。

這是基本邏輯（另請查看完整的源代碼）：

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;

}

反對回復 2021-12-02

慕碼人2483693

TA貢獻1860條經驗獲得超9個贊

我使用以下代碼行在 node.js 應用程序中設置了 puppeteer。在 pdf 文件中顯示圖表工作正常。

對我來說， defaultViewport: null 和 args: ['--window-size=1920,1080'] 的組合給了我全屏顯示，視圖適合屏幕大小，圖表顯示寬度適當，如應用程序所示：

const browser = await puppeteer.launch({

headless: true,

defaultViewport: null,

args: [

'--window-size=1366,768',

'--no-sandbox',

'--disable-setuid-sandbox',

});

const page = await browser.newPage();

await page.setDefaultNavigationTimeout(0);

await page.goto(reportUrl, {

waitUntil: ['load', 'domcontentloaded', 'networkidle0'],

});

反對回復 2021-12-02

烙印99

TA貢獻1829條經驗獲得超13個贊

我已經設置了一個 puppeteer 代碼，用于加載 Google Chart 示例頁面的 Iframe，然后將elementHandle #chart_div. 這比加載另一個庫要快得多和簡單得多。

接下來，您可以使用 div 元素創建 HTML DOM，并使用它設置 Google Chart 并截取 div 元素的屏幕截圖。

const page = await browser.newPage()

page.setDefaultNavigationTimeout(0);

const goto = await page.goto('https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery/barchart_9a8ce4c79b8da3fa2e73bee14869e01b6f7fb5150dc7540172d60b5680259b48.frame')

const wait = await page.waitForSelector('#chart_div > div', {'visible' : true, 'timeout' : 0})

const elem = await page.$('#chart_div')

const save = await elem.screenshot({path : 'googlechart.png' })

反對回復 2021-12-02

3 回答
0 關注
257 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

使用 Puppeteer 渲染谷歌圖表

使用 Puppeteer 渲染谷歌圖表

3 回答

添加回答