2

このチュートリアルに基づいてサーバー側でグラフをレンダリングしようとすると、次のエラーが発生しました。

phantomjs highcharts-convert.js -infile options1.json -outfile chart1.png -scale 2.5 -width 300 -constr Chart -callback callback.js
SyntaxError: Parse error

SyntaxError: Parse error

Highcharts.options.parsed
Highcharts.callback.parsed
ReferenceError: Can't find variable: Highcharts

  phantomjs://webpage.evaluate():58
  phantomjs://webpage.evaluate():103
  phantomjs://webpage.evaluate():103
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...
loading images...

以下は、同じディレクトリにあるhightcharts-convert.jsファイルのファイルです。

 ls
callback.js            highcharts-more.js  highstock.js         options1.json
highcharts-convert.js  highcharts.js       jquery-1.8.2.min.js  readme.md

options1.jsonのコンテンツ

{
        xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
};

callback.jsの内容

function(chart) {
        chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
                fill : '#FCFFC5',
                stroke : 'black',
                'stroke-width' : 1
        }).add();
}
4

3 に答える 3

4

highstock.js がテキスト ファイル (バイナリ ファイルではない) であることを確認してください。ファイルhttp://code.highcharts.com/stock/highstock.jsは gzip されています ....

ここに詳細なレシピがあります：

highcharts/exporting-server/phantomjs に 3 つのファイルを追加します。

cp js/highcharts.js exporting-server/phantomjs/
cp js/highcharts-more.js exporting-server/phantomjs/
curl http://code.highcharts.com/stock/highstock.js -o exporting-server/phantomjs/highstock.js.gz

ファイルを解凍しています：

gzip -d exporting-server/phantomjs/highstock.js.gz

フォルダに移動した場合：

cd exporting-server/phantomjs/

md5 チェックサム (現在のバージョン 2.3.5) を確認できます。

4a656e1918e259fbca5bb3bec6e3b945  highcharts-convert.js
3e2a05342b0d4d1b759dffffebc5f23f  highcharts-more.js
d6f1e284bc49d0502576e06d905274fd  highstock.js
cfa9051cc0b05eb519f1e16b2a6645d7  jquery-1.8.2.min.js
1fde128c0c2f8bf16fa1a4166e9b48c7  readme.md

ファイルを含むサンプル フォルダーを作成できます。

mkdir test

2 つの入力ファイルを配置または作成します。

1つ目のファイル：callback.js

function(chart) {
        chart.renderer.arc(200, 150, 100, 50, -Math.PI, 0).attr({
                fill : '#FCFFC5',
                stroke : 'black',
                'stroke-width' : 1
        }).add();
}

2番目のファイル: infile.json

{
        xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
};

サンプル テスト、ここでは test フォルダーからのコマンド ライン:

phantomjs  ../highcharts-convert.js -infile infile.json  -callback callback.js -outfile a.png -width 2400 -constr Chart -scale 1

コンソールの結果:

Highcharts.imagesLoaded:7a7dfcb5df73aaa51e67c9f38c5b07cb
done loading images

この素晴らしいライブラリのすべてです。

ザビエル

于 2013-03-07T22:58:53.447 に答える
0

これは適切な JSON だと思います:

{
    "xAxis": {
            "categories": ["Jan", "Feb","Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
    },
    "series": [{
            "data": [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
}
于 2013-02-26T11:35:17.337 に答える