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

you can try this 

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

    }
});

Save highchart as binary image

于 2014-03-20T10:52:24.327 回答