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

Question

使用highcharts,您可以使用内置按钮下载当前图表(例如:http://www.highcharts.com/demo/ ,此按钮:).您可以将其保存为PNG,JPEG,PDF或SVG.

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

我想我必须修改exportChartexports.src.js文件中的函数.它看起来像这样(但我不知道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.下面的示例同时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

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

您要发布到的URL是/exporting-server/index.php的新版本.然后,您可以随意使用imageURL.

Answer 3

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

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

1. 确保您的服务器上安装了 PHP 和 Java。
2. 将下载包中/exporting-server目录下的index.php文件上传到您的服务器。
3. 在您的 FTP 程序中，在与 index.php 相同的目录中创建名为 temp 的目录，并将这个新目录更改为 777（仅限 Linux/Unix 服务器）。
4. 从http://xmlgraphics.apache.org/batik/#download下载蜡染布。查找适合您的 jre 版本的二进制发行版
5. 将 batik-rasterizer.jar 和整个 lib 目录上传到 Web 服务器上的某个位置。在index.php 文件顶部的选项中，将路径设置为batik-rasterier.jar。
6. 在图表选项中，设置导出.url 选项以匹配您的 PHP 文件位置。”