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

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

快速的谷歌search给我这个网页 。 结合HighCharts和NodeJS似乎是正确的方法,但这种解决scheme不适用于较新版本的HighCharts。 更确切地说,在NodeJS中使用jsdom模块(v0.2.10 – 最新版本)和HighStock v1.0.2(请看下面的代码):

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); } }); 

抛出exception:

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

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

有没有解决这个问题的方法? 一些更好的图书馆, jsdom ? 或者一些奇怪而又有用的技巧? 任何想法赞赏。 🙂

//编辑

感谢ReCoder我已经设法得到它的工作。 主要的事情是添加forExport标志的选项(防止例外)。 不幸的是,这产生了图表,但没有更新持有人。 添加了exporting模块(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: '<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!"); } }); } }); 

该图表不如应该(例如标签放置不好),但也许这是一个调整选项的问题。 至less它工作!

这可以通过提高options对象中的"forExport"标志来解决:

 options.chart.forExport = true; 

我试图重新创build你的例子,我得到jQuery和Highcharts与jsdom加载。 看起来Highcharts试图用html片段调用createElement

 createElement('<div filled="f" stroked="f" style="position: absolute;left:0;top:0;width:10px;height:10px;"/>') 

这看起来很腥 我不确定它是如何在浏览器中工作的 – 我无法在浏览器中调用createElement (Chromium)。

我用phantomJs取代了node.js,它做得很好,如生成HTML Canvas图像数据服务器端所描述的那样。 (例如来自jQplot,但也适用于高图)。