使用NodeJS在Jsdom中创建包含Highcharts的图表

时间:2016-07-13 09:37:10

标签: javascript jquery node.js highcharts jsdom

使用nodejs,jsdom和javascript库jquery和highcharts(highcharts依赖于jquery)我试图在我的服务器上创建一个简单的脚本,从中我获得创建的图表的svg代码。

问题:我可以使用$('#elementID')来创建一个元素的highcharts。highcharts ...但是这对nodejs不起作用,我该如何正确调用它的函数? ($('#test')。highcharts)

我在jsfiddle中准备了这个例子:http://jsfiddle.net/5se8rozo/5/

var jsdom = require("jsdom");

jsdom.env({
    html: '<html><body><div id="test">Div Content</div></body></html>',
    scripts: ["http://code.jquery.com/jquery.js",
    "https://code.highcharts.com/highcharts.js",
    "https://code.highcharts.com/modules/exporting.js"],
    done : function (error, window) {
        var $ = window.$;
        $(window).ready(function(){

            console.log( 'length: ' + $('#test').length );

            //the following prints "html: Div Content" which is correct
            console.log( 'html: ' + $('#test')[0].innerHTML ); 

            $('#test').highcharts({
                xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                series: [{
                  data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 
                    135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }]
            });

            console.log( 1 ); //this gets printed

            //following should print some svg content with chart, 
            // but prints "html: Div Content" which means the highchart 
            // function does not work properly in this script
            console.log( 'html: ' + $('#test')[0].innerHTML );

            var svg = $('#test').highcharts().getSVG();

            console.log( 2 ); //program does not reach this

            console.log( svg );
        });
    }
});

我的例子,当使用“node example.js”打印时:

length: 1
html: Div Content
1
html: Div Content

- &GT;这意味着该程序到达“console.log(1)”,然后打印应该已更改为某些svg内容的div内容,它不会到达“console.log(2)”

0 个答案:

没有答案