jsdom 和 google 图表中的 SVG 支持答案

【问题标题】：SVG support in jsdom and google chartsjsdom 和 google 图表中的 SVG 支持
【发布时间】：2016-04-26 21:05:28
【问题描述】：

我正在尝试在 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() 动态加载似乎不起作用，但在本地加载从 google 动态加载的 js 文件似乎没问题。 google.visualization 似乎有效。然而，在文档中的 chart.draw(..) 之后，我只能找到一个 superultrageneric：

“不支持图形”

div 中的错误并且看不到实际的 svg。我在 jsdom 页面中执行 Modrnizer 只是为了好玩，并且 SVG 和内联 SVG 测试处于“假”状态。但是因为我发现很多人说用 jsdom 成功生成了服务器端 svg，我想这没有那么有意义。有人尝试过类似的方法并有一些建议吗？

【问题讨论】：

github.com/alexscheelmeyer/node-phantom
它将帮助那些愿意帮助您的人真正能够看到那些说他们已经成功使用 jsdom 生成服务器端 SVG 的人的报告。（你能提供他们的链接吗？）
这个似乎成功了，但显然与另一个库stackoverflow.com/questions/9362680/…

标签： node.js jsdom

【解决方案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

尝试使用谷歌自动加载方式在脚本标签中同步加载它会出现此错误： var data = new google.visualization.DataTable(); TypeError: google.visualization.DataTable 不是函数

如果我在 jsdom 给出 done 事件后将其更改为使用 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");
    }
}
}
});

【讨论】：