1

いくつかのグラフィックを生成するためにライブラリ Highcharts を使用します。

それらをサーバーに送信し、データ情報をデータベースに保存するために mysql リクエストを実行したいと考えています。問題は、ファイルをコンピューターにダウンロードするだけです。

サーバーの事前定義されたフォルダーに保存したいと思います。それをダウンロードするだけです。

私は多くの努力をしてこのコードを書きました。

多くの問題に遭遇しましたが、これを最後に渡す方法がわかりません。

イメージを生成し、自動でダウンロードするためのコードは次のとおりです。

      <script type="text/javascript">//<![CDATA[ 
$(function(){
/**
 * Create a global getSVG method that takes an array of charts as an argument
 */
Highcharts.getSVG = function(charts) {
    var svgArr = [],
        top = 0,
        width = 0;

    $.each(charts, function(i, chart) {
        var svg = chart.getSVG();
        svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
        svg = svg.replace('</svg>', '</g>');

        top += chart.chartHeight;
        width = Math.max(width, chart.chartWidth);


        svgArr.push(svg);
    });

    return '<svg height="2400px" width="1200px" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

/**
 * Create a global exportCharts method that takes an array of charts as an argument,
 * and exporting options as the second argument
 */
Highcharts.exportCharts = function(charts, options) {
    var form
        svg = Highcharts.getSVG(charts);

    // merge the options
    options = Highcharts.merge(Highcharts.getOptions().exporting, options);

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

    // add the values
    Highcharts.each(['filename', 'type', 'width', 'svg'], function(name) {
        Highcharts.createElement('input', {
            type: 'hidden',
            name: name,
            value: {
                filename: options.filename || 'chart',
                type: options.type,
                width: 1200,

                svg: svg
            }[name]
        }, null, form);
    });
    //console.log(svg); return;
    // submit
    form.submit();

    // clean up
    form.parentNode.removeChild(form);
};


$('#export').click(function() {
    Highcharts.exportCharts([chart1, chart2, chart3]);
});
});//]]>  

</script>
    </head>
    <body>

<script src="js/highcharts.js"></script>
<script type="text/javascript" src="http://highcharts.com/js/testing-exporting.js"></script>
<div id="container" style="height: 400px; width:1200px"></div>
<div id="container2" style="height: 400px; width:1200px"></div>
<div id="container3" style="height: 400px; width:1200px"></div>

<button id="export">Export all</button>

私はそれをサーバーに送信しようとしています。

助けてくれてありがとう。

私の最大限の敬意を受け取ります。

よろしくSP。

4

1 に答える 1

0

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

 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);


var dataString = $('#mock').html() ; //  or just binary code 
$.ajax({
    type: 'POST',
    data: dataString,
    url: 'your-server/',
    success: function(data){

    }
});

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

于 2014-03-20T10:52:24.327 に答える