当我试图在node.js中加载google图表时,什么都没有发生。
我尝试从zombie.js和jsdom中的折线图文档加载first example,但在这两种情况下都不会加载图表。
最终目标是检索生成的图表的svg数据,以便导出到图像或pdf中。因此,如果可以使用另一种方法(服务器端使用node.js或php)来实现这一点,我愿意接受建议。
注意:我已经用gchartpph成功地生成了一些图表的图片,但是这个项目的要求是嵌入式版本是当前api提供的交互版本,导出的版本在视觉上与嵌入式版本完全相同(显然没有交互)。
编辑:我标记了PhantomJS,因为这是我最终采用的解决方案。
很抱歉没有链接,但是垃圾邮件预防机制只允许我发布2条。

最佳答案

这不是一个理想的解决方案,但我找到了node.js的替代方案,可以在PhantomJS中实现相同的最终目标。只需创建一个包含图表的html文件(test.html)和node.js一样,创建一个包含代码的js文件(test.js)。然后用phantomjs运行js文件。
在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的问题可能是我没有设置回调或超时来等待图表“就绪”。

07-24 09:51
查看更多