web-dev-qa-db-ja.com

ハイチャートを使用してサーバーにチャートの画像を保存する方法は？

ハイチャートには、現在のチャートをダウンロードするための組み込みボタンがあります（例： http://www.highcharts.com/demo/ 、このボタン： arrow）。 PNG、JPEG、PDFまたはSVGとして保存できます。

私がやりたいのは、画像をダウンロードする代わりにサーバーに保存するリンクを作成することです。どうすればできますか？

Exporting.src.jsファイルのexportChart関数を変更する必要があると思います。それは次のようになります（しかし、それを行うのに十分なJavaScriptは知りません）。

exportChart: function (options, chartOptions) {
        var form,
            chart = this,
            svg = chart.getSVG(chartOptions);

        // merge the options
        options = merge(chart.options.exporting, options);

        // create the form
        form = createElement('form', {
            method: 'post',
            action: options.url
        }, {
            display: NONE
        }, doc.body);

        // add the values
        each(['filename', 'type', 'width', 'svg'], function (name) {
            createElement('input', {
                type: HIDDEN,
                name: name,
                value: {
                    filename: options.filename || 'chart',
                    type: options.type,
                    width: options.width,
                    svg: svg
                }[name]
            }, null, form);
        });

        // submit
        form.submit();

        // clean up
        discardElement(form);
    },
javascriptimagehighcharts
14
Benjamin Crouzier

PhantomJS を使用すると、簡単に実行できます。 Highchartチャートをレンダリングして、SVG、PNG、JPEGまたはPDFに保存できます。以下の例は、デモHighchartsダイアグラムをSVGとPDFと同時にレンダリングします。

var system = require('system');
var page = require('webpage').create();
var fs = require('fs');

// load JS libraries
page.injectJs("js/jquery.min.js");
page.injectJs("js/highcharts/highcharts.js");
page.injectJs("js/highcharts/exporting.js");

// chart demo
var args = {
    width: 600,
    height: 500
};

var svg = page.evaluate(function(opt){
    $('body').prepend('<div id="container"></div>');

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            width: opt.width,
            height: opt.height
        },
        exporting: {
            enabled: false
        },
        title: {
            text: 'Combination chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
        },
        yAxis: {
            title: {
                text: 'Y-values'
            }
        },
        labels: {
            items: [{
                html: 'Total fruit consumption',
                style: {
                    left: '40px',
                    top: '8px',
                    color: 'black'
                }
            }]
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            },
            series: {
                enableMouseTracking: false, 
                shadow: false, 
                animation: false
            }
        },
        series: [{
            type: 'column',
            name: 'Andrii',
            data: [3, 2, 1, 3, 4]
        }, {
            type: 'column',
            name: 'Fabian',
            data: [2, 3, 5, 7, 6]
        }, {
            type: 'column',
            name: 'Joan',
            data: [4, 3, 3, 9, 0]
        }, {
            type: 'spline',
            name: 'Average',
            data: [3, 2.67, 3, 6.33, 3.33],
            marker: {
                lineWidth: 2,
                lineColor: 'white'
            }
        }, {
            type: 'pie',
            name: 'Total consumption',
            data: [{
                name: 'Andrii',
                y: 13,
                color: '#4572A7'
            }, {
                name: 'Fabian',
                y: 23,
                color: '#AA4643'
            }, {
                name: 'Joan',
                y: 19,
                color: '#89A54E'
            }],
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: false
            }
        }]
    });

    return chart.getSVG();
},  args);

// Saving SVG to a file
fs.write("demo.svg", svg);
// Saving diagram as PDF
page.render('demo.pdf');

phantom.exit();

コードをdemo.jsとして保存する場合は、bin/phantomjs demo.jsを実行してdemo.svgおよびdemo.pdfを生成します。

14
gakhov

私はのび太の方法を使用してこれを実装します。ユーザーの結果をグラフで示し、サーバーに画像をアップロードし、画像を含むメールを送信する調査を作成していました。ここで注意すべき点がいくつかあります。

Highcharts/exporting-server/index.phpファイルを次のようにいくつか更新する必要がありました。

私はディレクトリを「temp」から別のものに変更し、それが4つの異なる場所にあることに注意してください。

エラーが発生していたため、Shell_exec（）に「-XX：MaxHeapSize = 256m」を追加して変更する必要がありました。

$output = Shell_exec("Java -XX:MaxHeapSize=256m -jar ". BATIK_PATH ." $typeString -d $outfile $width /mypathhere/results/$tempName.svg");

そのイメージをダウンロードしたい場合は、以下をそのままにしておくことができます。

header("Content-Disposition: attachment; filename=$filename.$ext");
header("Content-Type: $type");
echo file_get_contents($outfile);

しかし、イメージへのパスを送り返すためにこれを変更したので、上記を削除してイメージパスに置き換えました（一時的な名前を使用していることに注意してください）。 ）：

echo "/mypathhere/results/$tempName.$ext";

また、このファイルはsvgファイルと作成した新しいファイルも削除しています。ファイルを削除するコードを削除する必要があります：

unlink($outfile);

また、svgファイルを保持する場合は、その前の行を削除することもできます。

Highcharts/js/modules/exporting.jsを必ず含めてください

次に、JSで次のようなことができます。

var chart = new Highcharts.Chart();    
var imageURL = '';
var svg = chart.getSVG();
var dataString = 'type=image/jpeg&filename=results&width=500&svg='+svg;
$.ajax({
    type: 'POST',
    data: dataString,
    url: '/src/js/highcharts/exporting-server/',
    async: false,
    success: function(data){
        imageURL = data;
    }
});

投稿先のURLは、/ exporting-server/index.phpの新しいバージョンです。その後、好きなだけimageURLを使用できます。

10
Anna

まだ行ったことはありませんが、index.phpフォルダにあるexporting-serverファイルで遊んでみませんか。デフォルトでは、Highchartsは（無料で）Webサービスを提供しますが、それを変更して独自のWebサービスを作成し、エクスポートしたり、グラフで必要なことを行うことができます。ここにあるこれらの指示を見てください Export module ：

「このWebサービスを独自のサーバーにセットアップする場合、POSTを処理するindex.phpファイルが/ exporting-serverディレクトリ内のダウンロードパッケージに含まれています。

  1. PHPおよびJavaがサーバーにインストールされていることを確認してください。
  2. Index.phpファイルをダウンロードパッケージの/ exporting-serverディレクトリからサーバーにアップロードします。
  3. FTPプログラムで、index.phpと同じディレクトリにtempというディレクトリを作成し、この新しいディレクトリを777にchmodします（Linux/Unixサーバーのみ）。
  4. http://xmlgraphics.Apache.org/batik/#download からBatikをダウンロードします。 jreのバージョンのバイナリディストリビューションを見つける
  5. Batik-rasterizer.jarとlibディレクトリ全体をWebサーバー上の場所にアップロードします。 index.phpファイルの上部にあるオプションで、batik-rasterier.jarへのパスを設定します。
  6. グラフオプションで、exporting.urlオプションをPHPファイルの場所と一致するように設定します。 "
4
Nobita

あなたはこれを試すことができます

 var chart = $('#yourchart').highcharts();
    svg = chart.getSVG();   
    var base_image = new Image();
    svg = "data:image/svg+xml,"+svg;
    base_image.src = svg;
    $('#mock').attr('src', svg);

Mockのhtmlを取得してDBに送信するか、バイナリコードのみを保存します。

ハイチャートをバイナリイメージとして保存

0
Prashobh