Как загрузить диаграммы Google в node.js?

Question

Как загрузить диаграммы Google в node.js?

Когда я пытаюсь загрузить диаграмму Google в node.js , ничего не происходит.

Я попытался загрузить первый пример из документов линейного графика в обоих zombie.js и jsdom, но диаграмма никогда не загружается ни в том, ни в другом случае.

Конечной целью является извлечение SVG-данных сгенерированной диаграммы для экспорта в изображение или PDF. Поэтому, если альтернативный метод (на стороне сервера с использованием node.js или PHP) для достижения этой цели возможно, я открыт для предложений.

ПРИМЕЧАНИЕ: У меня есть успешно сгенерированы изображения нескольких диаграмм с использованием gChartPhp, но требования этого проекта гласят, что встроенная версия должна быть интерактивной версией, предоставляемой текущим API, а экспортированная версия должна быть визуально ИДЕНТИЧНА встроенной (очевидно, не будучи интерактивной).

Редактировать: Я пометил PhantomJS, так как это решение, с которым я в конечном итоге пошел.

Извините за отсутствие ссылок, но механизм предотвращения спама будет только позвольте мне опубликовать 2.

3

php node.js phantomjs google-visualization

Author: user1936123, 2012-12-29

Source

1 answers

score 2 · Accepted Answer

Это не было идеальным решением, но я нашел альтернативу node.js для достижения той же конечной цели в PhantomJS. Просто создайте HTML-файл, содержащий диаграмму (test.html) и как node.js, создайте файл JS, содержащий ваш код (test.js). Затем запустите свой JS-файл с помощью PhantomJS.

В вашем файле JS откройте HTML-файл в виде веб-страницы, затем отрисовайте его, либо сохранив буфер изображения в файл:

var page = require('webpage').create();
page.open('test.html', function () {
    page.render('test.png');
    phantom.exit();
});

Затем запустите его:

phantomjs test.js

Для динамического создайте диаграмму, создайте следующий файл JS (test2.js ):

var system = require('system');
var page = require('webpage').create();
page.onCallback = function(data)
{
    page.clipRect = data.clipRect;
    page.render('test.png');
    phantom.exit();
};
page.includeJs('http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', function()
{
    page.includeJs('https://www.google.com/jsapi', function()
    {
        page.evaluate(function(chartType, data_json, options_json)
        {
            var div = $('<div />').attr('id', 'chart').width(900).height(500).appendTo($('body'));
            google.load("visualization", "1",
            {
                packages:[chartType == 'GeoChart' ? 'geochart' : 'corechart'],
                callback: function()
                {
                    data_arr = $.parseJSON(data_json);
                    data = google.visualization.arrayToDataTable(data_arr);
                    options = $.parseJSON(options_json);
                    chart = new google.visualization[chartType]($(div).get(0));
                    google.visualization.events.addListener(chart, 'ready', function()
                    {
                        window.callPhantom(
                        {
                            clipRect: $(div).get(0).getBoundingClientRect()
                        });
                    });
                    chart.draw(data, options);
                }
            });
        }, system.args[1], system.args[2], system.args[3]);
    });
});

Затем запустите его:

phantomjs test2.js LineChart '[["Date","Steve","David","Other"],["Dec 31",8,5,3],["Jan 1",7,10,4],["Jan 2",9,4,3],["Jan 3",7,5,3]]' '{"hAxis.slantedText":true}'

phantomjs test2.js PieChart '[["Employee","Calls"],["Steve",31],["David",24],["Other",13]]' '{"is3D":true}'

phantomjs test2.js GeoChart '[["State","Calls"],["US-CA",7],["US-TX",5],["US-FL",4],["US-NY",8]]' '{"region":"US","resolution":"provinces"}'

Чтобы получить данные изображения из внешнего скрипта, сделайте копию test2.js (test3.js ) и изменить

page.render('test.png');

До

console.log(page.renderBase64('png'));

Затем вызовите его (например, с PHP):

<?php

    $data = array(
        array("Employee", "Calls"),
        array("Steve", 31),
        array("David", 24),
        array("Other", 13)
    );
    $options = array(
        "is3D" => true
    );
    $command = "phantomjs test3.js PieChart '" . json_encode($data) . "' '" . json_encode($options) . "'";
    unset($output);
    $result = exec($command, $output);
    $base64_image = implode("\n", $output);
    $image = base64_decode($base64_image);

?>

ПРИМЕЧАНИЕ: Оглядываясь назад на весь этот процесс, проблема, с которой я столкнулся node.js возможно, я не настроил обратные вызовы или тайм-ауты, чтобы подождать, пока графики не будут "готовы".