Рендеринг Google Charts с Кукольником - PullRequest
Новая
       8

Рендеринг Google Charts с Кукольником

0 голосов
/ 24 октября 2019

Я пытаюсь выяснить, как правильно объединить Puppeteer и библиотеку GoogleCharts для рендеринга гистограмм и экспорта PNG-изображения диаграммы.

Базовая компоновка, в основном основанная на документации Puppeteer, кажется,быть чем-то вроде этого, чтобы создать новую страницу с элементом canvas. 

(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 DOM страницы Кукловода?

Кроме того, если бы вы могли привести пример правильного способа экспорта страницы / холста в виде изображения в формате PNG, это было бы очень полезно.

ПРИМЕЧАНИЕ : Я много просмотрел, чтобы найти существующую библиотеку / пакет, который бы делал то, что я пытаюсь достичь, но ближе всего я могfound это пакет TypeScript для Chart.JS: https://github.com/SeanSobey/ChartjsNodePuppeteer. Я не знаком с TypeScript / ES6, поэтому я не знаю, как я мог бы адаптировать эту библиотеку, чтобы она работала с библиотекой Google Charts вместо Chart. JS.

Спасибо

1 Ответ

0 голосов
/ 29 октября 2019

Я установил код кукловода, который загружает пример страницы страницы Google Chart, а затем снимок экрана elementHandle #chart_div. Это намного быстрее и проще, чем загрузка другой библиотеки.

Далее вы можете создать HTML DOM с элементом div, настроить 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' })
...