使用NodeJS生成服务器端HighStock图表-Server-SideHighStockchartsgenerationwithNodeJS

I'm using HighStock to generate some charts in browser. But now I want to store some of them at the server. So I know that HighCharts can be exported to the server but I'd rather use some other way if possible. The thing is to run HighStock at the server and convert the svg to some image format and then store it there.

我正在使用HighStock在浏览器中生成一些图表。但现在我想将其中一些存储在服务器上。所以我知道HighCharts可以导出到服务器但是如果可能的话我宁愿使用其他方法。问题是在服务器上运行HighStock并将svg转换为某种图像格式,然后将其存储在那里。

Quick googling gives me this page. Combining HighCharts and NodeJS seems to be the right way but this solution does not work for newer versions of HighCharts. More precisely, using jsdom module (v0.2.10 - the latest) in NodeJS with HighStock v1.0.2 (look at the following code):

快速谷歌搜索给了我这个页面。结合HighCharts和NodeJS似乎是正确的方法,但此解决方案不适用于较新版本的HighCharts。更确切地说,使用带有HighStock v1.0.2的NodeJS中的jsdom模块(v0.2.10 - 最新版本)(查看以下代码):

var jsdom = require('jsdom');
var fs = require('fs');
var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString();
var Highstock = fs.readFileSync('./js/highstock.js').toString();
jsdom.env({
    html: '
',
    src: [ jQuery, Highstock ],
    done: function(errors, window) {
        if (errors) return console.log(errors);
        var Highcharts = window.Highcharts;
        var chart = new Highcharts.Chart(options);
    }
});

throws an exception:

抛出异常:

Error: Invalid character: Invalid character in tag name: <

Somehow these two libraries does not seem to work together. So this may work with older versions of HighStock but actually I need HighStock v1.0.2.

不知何故,这两个库似乎没有一起工作。所以这可能适用于旧版本的HighStock,但实际上我需要HighStock v1.0.2。

Is there any solution for this problem? Some better library that jsdom? Or some strange yet working tricks? Any idea appreciated. :)

这个问题有什么解决方案吗?一些更好的图书馆,jsdom?还是一些奇怪而又有效的技巧?任何想法都赞赏。 :)

// EDIT

Thanks to ReCoder I've managed to get it working. Main thing was to add forExport flag to the options (preventing exceptions). Unfortunetly this generated the chart but did not update the holder. I've managed to get it working after adding exporting module (part of HighStock package). The full working code looks like this:

感谢ReCoder,我设法让它运转起来。主要的是为选项添加forExport标志(防止例外)。不幸的是,这产生了图表但没有更新持有人。添加导出模块(HighStock包的一部分)后,我设法让它工作。完整的工作代码如下所示:

var jsdom = require('jsdom');
var fs = require('fs');
var jQuery = fs.readFileSync('./js/jquery-1.7.min.js').toString();
var Highstock = fs.readFileSync('./js/highstock.src.js').toString();
var Exporting = fs.readFileSync('./js/exporting.src.js').toString();

jsdom.env({
    html: '
',
    src: [ jQuery, Highstock, Exporting ],
    done: function(errors, window) {
        if (errors) return console.log(errors);
        var Highcharts = window.Highcharts;
        var chart = new Highcharts.Chart({
              chart: {
                 renderTo: 'container',
                 animation: false,
                 forExport: true       
              },
              exporting: { enabled: false },
              xAxis: {
                 categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              series: [{
                 animation: false,
                 name: 'Tokyo',
                 data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
              }, {
                 animation: false,      
                 name: 'New York',
                 data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
              }, {
                 animation: false,      
                 name: 'Berlin',
                 data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
              }, {
                 animation: false,      
                 name: 'London',
                 data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }]
        });

        var svg = chart.getSVG();

        fs.writeFile("./test.svg", svg, function(err) {
            if(err) {
                console.log(err);
            } else {
                console.log("The file was saved!");
            }            
        }); 
    }
});

The chart is not as good as it should be (for example labels badly placed), but maybe it's a matter of tuning options. At least it works!

图表不是应该的那么好(例如标签放置不当),但可能是调整选项的问题。至少它有效!

3 个解决方案

options.chart.forExport = true;

createElement('
')