使用NodeJS的服务器端HighStock图表生成 [英] Server-Side HighStock charts generation with NodeJS

问题描述

我使用 HighStock 在浏览器中生成一些图表。但现在我想把它们的一些在服务器。所以我知道HighCharts可以导出到服务器，但我宁愿使用一些其他的方法，如果可能的话。

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.

快速Google搜索给我本页。结合HighCharts和NodeJS似乎是正确的方法，但此解决方案不适用于较高版本的HighCharts。更准确地说，在Node.js中使用HighStock v1.0.2的 jsdom 模块（v0.2.10 - 最新版本）（查看下面的代码） ：

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):

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: '<div id="container"></div>',
    src: [ jQuery, Highstock ],
    done: function(errors, window) {
        if (errors) return console.log(errors);
        var Highcharts = window.Highcharts;
        var chart = new Highcharts.Chart(options);
    }
});

引发异常：

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

不知怎的，这两个库似乎没有一起工作。所以这可能与旧版本的HighStock，但实际上我需要的HighStock v1.0.2。

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.

这个问题有解决方案吗？一些更好的库， jsdom ？还是一些奇怪的工作技巧？任何想法赞赏。 ：）

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

// EDIT

得到它工作。主要的是给选项添加 forExport 标志（防止异常）。不幸的是，这生成了图表，但没有更新持有人。我添加了导出模块（HighStock包的一部分）后，我设法使它工作。完整的工作代码如下所示：

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:

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: '<div id="container"></div>',
    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!

推荐答案

这可以通过提高 forExport flag in options object：

That can be fixed by raising the "forExport" flag in options object:

options.chart.forExport = true;

这篇关于使用NodeJS的服务器端HighStock图表生成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！