使用 Puppeteer 渲染谷歌图表

3回答

慕雪6442864

我遇到了同样的问题，并将其放入一个名为Google Charts Node的开源库中。这是一个示例用法：const GoogleChartsNode = require('google-charts-node');// Define your chart drawing functionfunction 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 imageconst 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;}

0 0

慕码人2483693

我使用以下代码行在 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'],});

0 0

烙印99

我已经设置了一个 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' })

0 0