Question

使用highcharts，您可以使用内置按钮下载当前图表（例如：http://www.highcharts.com/demo/，此按钮：）。您可以将其另存为PNG，JPEG，PDF或SVG。

我想要做的是创建将图像保存在服务器上而不是下载的链接。我怎么能这样做？

我想我必须修改exports.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);
    },

Answer 1

使用PhantomJS可以轻松完成。您可以渲染Highchart图表并将其保存为SVG，PNG，JPEG或PDF。下面的示例同时向SVG和PDF呈现演示Highcharts图表：

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

Answer 2

我只是使用Nobita的方法实现这一点。我创建的调查显示用户在图表中的结果，将图像上传到我的服务器，然后发送一封包含图像的电子邮件。这里有几点需要注意。

我必须对highcharts / exports-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 / exports.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;
    }
});

您要发布的网址是/exporting-server/index.php的新版本。然后，您可以随意使用imageURL。

Answer 3

我之前没有这样做，但我相信您想要使用位于index.php文件夹中的exporting-server文件。默认情况下，Highcharts提供（免费）Web服务，但您可以修改它并创建自己的Web服务以进行导出，或者对图表执行任何操作。请查看这些说明Export module：

“如果要在自己的服务器上设置此Web服务，则处理POST的index.php文件将在/ exports-server目录下的下载包中提供。

确保您的服务器上安装了PHP和Java。
从/ exports-server目录上传index.php文件下载包到您的服务器。
在您的FTP程序中，创建名为temp的目录目录为index.php，chmod这个新目录为777 （仅限Linux / Unix服务器）。
从http://xmlgraphics.apache.org/batik/#download下载蜡染。找到您的jre版本的二进制分发
将batik-rasterizer.jar和整个lib目录上传到您的Web服务器上的位置。在顶部的选项中 index.php文件，设置batik-rasterier.jar的路径。
在图表选项中，设置exports.url选项以匹配您的 PHP文件位置。 “

Answer 4

你可以试试这个

 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或仅保存二进制代码。

Save highchart as binary image

如何使用highcharts在服务器上保存图表的图像？

4 个答案: