我正在使用 HighStock在浏览器中生成一些图表。但是现在我想将其中一些存储在服务器上。所以我知道 HighCharts 可以导出到服务器,但如果可能的话我宁愿使用其他方式。事情是在服务器上运行 HighStock 并将 svg 转换为某种图像格式,然后将其存储在那里。
快速谷歌搜索给我 this page .结合 HighCharts 和 NodeJS 似乎是正确的方法,但此解决方案不适用于较新版本的 HighCharts。更准确地说,使用 jsdom带有 HighStock v1.0.2 的 NodeJS 中的模块(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: '<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。
这个问题有解决办法吗?一些比 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!");
}
});
}
});
图表不如应有的好(例如标签放置不当),但这可能是调整选项的问题。至少它有效!
最佳答案
这可以通过提高选项对象中的 "forExport"
标志来解决:
options.chart.forExport = true;
关于javascript - 使用 NodeJS 生成服务器端 HighStock 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9362680/