Question

我正在尝试在node.js中生成一些谷歌图表服务器端。

jsdom.env({
    html: '<!DOCTYPE html><html><head></head><body><div style="width: 900px; height: 500px;" id="googlechart"></div></body></html>',
    scripts: ['https://www.google.com/jsapi'],
    done: function (err, window) {
        (some stuff)
    }
})

原因是webkit或带有内联SVG的wkhtmltopdf中的错误。如果SVG是指向.xhtml文件的对象，那么pdf就可以了，否则渲染中会出现随机错误。

google.load（）动态加载似乎不起作用，但从谷歌本地加载其他动态加载的js文件似乎没问题。 google.visualization似乎是有效的。然而，在文档中的chart.draw（..）之后，我只能找到一个superultrageneric：

“不支持图形”

div中的

错误，看不到实际的svg。我在jsdom页面中执行了Modrnizer只是为了好玩，SVG和Inline SVG测试都是“假”。但是因为我发现很多人说使用jsdom成功生成了服务器端svg，我想这不是那么有意义。任何人都尝试过类似的东西并提出一些建议吗？

Answer 1

我还在2016年用jsdom 8.4.0最新版本看到了这个问题。

我在他们的GitHub上记录了一个问题，这解释了我看到错误 var data = new window.google.visualization.DataTable（）; ^ TypeError：window.google.visualization.DataTable不是函数

或 google.load永远不会正常返回..否则我不会在脚本中使用自动加载。 https://github.com/tmpvar/jsdom/issues/1463

尝试使用googles autoload方式在脚本标记中加载同步所有内容会出现此错误： var data = new google.visualization.DataTable（）; TypeError：google.visualization.DataTable不是函数

如果我在jsdom提供完成事件后更改它以使用google.load它只是存在而且我没有得到任何细节

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(function(){
console.log("Google onload callback called");
window.docharting();
});

完整代码：

var jsdom = require("jsdom");

//TODO newscript way to load, can update someday
//http://www.gstatic.com/charts/loader.js
//google.charts.load('current', {'packages':['corechart']});
//google.charts.setOnLoadCallback(docharting);
jsdom.env({
html: '

',
scripts: ["http://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"],
FetchExternalResources :["script", "link", "img"],
ProcessExternalResources: ["script"],
done: function (err, window) {
if(err){
console.log("err: " + err);
return;
}else{
console.log("Initiating charting...");
    var google = window.google;
    console.log("Google visualization: " + google.visualization);
    window.docharting = function(err, obj){
        console.log("err " + JSON.stringify(err) + ", obj: " + obj);
        console.log("Starting chart drawing...");
                // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([
          ['Mushrooms', 3],
          ['Onions', 1],
          ['Olives', 1],
          ['Zucchini', 1],
          ['Pepperoni', 2]
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        d = window.document;
        elm = d.getElementById('map');

        console.log("Got map container " + el + ", starting chart rendering...");

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(elm);

        google.visualization.events.addListener(chart, 'ready', function () {
            console.log("Chart ready, capturing image uri");
          imageURI = chart.getImageURI();
          console.log(imageURI);
        });

        console.log("Data ready, starting drawing...");
        chart.draw(data, options);
        console.log("Done drawing");
    }

    if(google){

        //google.load("visualization", "1", {packages:["corechart"]});
        //google.setOnLoadCallback(function(){
        //  console.log("Google onload callback called");
        //  window.docharting();
        //});
        window.docharting();
    }else{
        console.log("Google apis did not initialize properly");
    }
}
}
});

jsdom和谷歌图表中的SVG支持

1 个答案: