1

ウェブページ用に動的な HighChart を既に作成しています。これらには、いくつかの JavaScript 依存関係とチャート生成スクリプトがあります。HighCharts が装備した新しい HighCharts/Node/PhantomJS スイートを使用して、これらのチャートの PDF の作成を開始したいと考えています (プレス リリースを参照)。image-gen ノード サーバーは、別のボックス/VM で実行されます。同じチャートに対して 2 つの別々のコードベースを維持する必要なしに、これを行うにはどうすればよいでしょうか? Node についてはまだあまり詳しくないので、Web リクエストでスクリプトをリクエストする方法がよくわかりません。サーバー側で画像としてグラフの生成を開始したい多くの HighCharts ユーザーは、関連する 2 つのコードセットを管理する際に同様の問題に遭遇すると思います...

本質的に、私たちはすでにこれを持っています：

Web サーバー -> JSON (データ) + foo.js+ bar.js+ foo.html-> 動的グラフを含む Web ページ。

構築したいもの:

Web サーバー -> JSON (データ) + 個別のノード サーバー + foo.js+ bar.js-> Web リクエスト経由で利用可能な画像

明らかにいくつかの冗長性。依存関係をどのように管理できますか?

4

2 に答える 2

2

ノードは素晴らしいものですが、壊れる可能性のある多くの可動部品が必要なため、アプローチが不必要に複雑であると感じました。そこで、ファイルを動的に作成するという非常に単純なソリューションを実行しました。私が直面した唯一の問題は、pdf に追加した後に一時ファイルを削除することでした。PDFのレンダリングが中断されます。ディレクトリを /tmp に設定すると、phantomjs がクラッシュしました。私が現在思いついた最良のアイデアは、一時的に生成されたファイルを一時ディレクトリに置き、毎晩そのディレクトリ内のすべてをcronジョブで削除することです。

コードの単純さからこれを投稿します。コードの再利用性を維持するために、関数内にある必要があります。

<?php    
    $TmpInFileName = 'tmp/graph_'.md5($CurrentDate.rand(666,9482845713)).'.js';
    $TmpGraphFileName = 'tmp/pnggraph_'.md5($CurrentDate.rand(2666,54713)).'.png';

    $Data = "
        {
            chart: {
                zoomType: 'xy',
                width: 700,
                height: 520
            },
            credits: {
                  enabled: false
            },
            colors: [
                     '#2f7ed8', 
                     '#910000', 
                     '#8bbc21', 
                     '#1aadce', 
                     '#492970',
                     '#f28f43', 
                     '#77a1e5', 
                     '#c42525', 
                     '#a6c96a'
                  ],
            title: {
                text: 'Sample Graph - created at ".date('m/d/Y g:i:s a')."',
                style: {
                    fontSize: '16px',
                }
            },
            xAxis: [{
                categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30']
            }],
            yAxis: [{ 
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Y axis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Sec Yaxis',
                    style: {
                        fontSize: '16px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value}',
                    style: {
                        fontSize: '14px',
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'horizontal',
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
            },
            series: [{
                name: 'first',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.9502311075212, -119.96203992145706, -119.98172620218355, -119.71898290168028, -119.97023935590325, -119.95230287195413]
            },
            {
                name: 'second',
                type: 'spline',
                yAxis: 1,
                data: [0, -119.24222667756482, -119.60905809195222, -119.63522965403729, -119.11011466187935, -119.63643171374981, -119.54969080301575]

            },{
                name: 'third',
                type: 'column',
                data: [10, 11, 9, 7, 5, 2, 7]
            },{
                name: 'fourth',
                type: 'column',
                data: [0, -0.7080044299563895, -0.35298182950484147, -0.34649654814626274, -0.6088682398009269, -0.33380764215343106, -0.40261206893838164]
            }]
        }";

    try {
        $myfile = fopen($TmpInFileName, "w") or die("Unable to open file!");
        fwrite($myfile, $Data);
        fclose($myfile);                                
    } catch (Exception $e) {
        echo 'Error: '.$e.' <br />';
    }  

    $URL_Command = "phantomjs  /highcharts/exporting-server/phantomjs/highcharts-convert.js -infile $TmpInFileName -outfile $TmpGraphFileName -width 600";
    exec($URL_Command);    

    echo '<img src="'.$TmpGraphFileName.'" alt="Could not load img: '.$TmpGraphFileName.'">';

?>

これが役立つことを願っています。これを行うために Node.JS または Java を使用しない適切なソリューションを見つけることができませんでした。純粋な PHP ソリューションが必要でした。

于 2015-06-09T16:49:53.377 に答える
0

ハイチャート構成オブジェクト全体 (例: Highcharts.chart(configObj)) を URL エンコードされた文字列としてノード サーバーに渡すことにしました。ノード サーバーにいくつかのレンダリング機能を配置する必要がありましたが、それほど悪くはありませんでした。また、一部のレンダリング関数を文字列構成オブジェクトに貼り付けました。最も美しい結果ではありませんが、うまくいきました。

于 2013-05-01T21:04:24.893 に答える