7

HighStockを使用して、ブラウザーでいくつかのグラフを生成しています。しかし今、私はそれらのいくつかをサーバーに保存したいと思います。したがって、HighChartsをサーバーにエクスポートできることはわかっていますが、可能であれば他の方法を使用したいと思います。サーバーでHighStockを実行し、svgを何らかの画像形式に変換して、そこに保存することが重要です。

クイックグーグルでこのページが表示されます。HighChartsとNodeJSを組み合わせるのは正しい方法のようですが、このソリューションは新しいバージョンのHighChartsでは機能しません。より正確には、NodeJSでHighStock v1.0.2を使用して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: '<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: <

どういうわけか、これら2つのライブラリは連携して機能していないようです。したがって、これは古いバージョンのHighStockで機能する可能性がありますが、実際にはHighStockv1.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

あなたの例を再作成しようとしましたが、jQuery と Highcharts に jsdom が読み込まれました。Highcharts がcreateElementhtml フラグメントで呼び出そうとしているようです:

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

「 Generating HTML Canvas image data server-side?」で説明されているように、node.js を phantomJs に置き換えました。 (例は jQplot のものですが、ハイチャートでも機能します。)

于 2013-02-09T21:17:47.807 に答える