7

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

快速谷歌搜索给了我这个页面。结合 HighCharts 和 NodeJS 似乎是正确的方法，但这种解决方案不适用于新版本的 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);
    }
});

抛出异常：

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

图表不如应有的好（例如标签放置不当），但可能是调整选项的问题。至少它有效！

4

3 回答 3

2

这可以通过提高"forExport"选项对象中的标志来解决：

options.chart.forExport = true;
于 2012-03-12T20:11:38.573 回答
0

我尝试重新创建您的示例，并使用 jsdom 加载了 jQuery 和 Highcharts。看起来 Highcharts 尝试createElement使用 html 片段进行调用：

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

这看起来很腥。我不确定它在浏览器中是如何工作的——我也不能createElement在我的浏览器中调用它（Chromium）。

于 2012-02-20T16:22:49.707 回答
0

我用 phantomJs 替换了 node.js，它做得很好，如生成 HTML Canvas 图像数据服务器端中所述？ （示例来自 jQplot，但也适用于 highchart。）

于 2013-02-09T21:17:47.807 回答