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

对于highcharts，您有一个内置按钮来下载当前图表（示例：，此按钮：）。您可以将其另存为PNG、JPEG、PDF或SVG

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

我想我必须修改export.src.js文件中的

exportChart

函数。看起来是这样的（但我对javascript的了解还不够）：

---

我以前没有这样做过，但我相信您希望使用

导出服务器

文件夹中的

index.php

文件。 默认情况下，Highcharts提供（免费）web服务，但您可以修改该服务并创建自己的web服务进行导出，或者使用图表执行任何操作。请参阅以下说明，可在此处找到：

“如果您想在自己的服务器上设置此web服务，处理此帖子的index.php文件将在/exporting server目录下的下载包中提供

确保服务器上安装了PHP和Java

从中的/exporting server目录上载index.php文件 将下载包下载到您的服务器

在FTP程序中，在同一目录中创建名为temp的目录 目录为index.php，并将此新目录命名为777 （仅限Linux/Unix服务器）

从下载蜡染。 查找您的jre版本的二进制发行版

将batik-rasterizer.jar和整个lib目录上载到 在web服务器上的位置。在 在index.php文件中，将路径设置为batik-rasterier.jar

在图表选项中，将exporting.url选项设置为与 PHP文件位置。”

---

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

我必须对highcharts/exporting server/index.php文件进行一些更新，如下所示：

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

我将目录从“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);

但是，我更改了这个，因为我想将路径发送回映像，所以我删除了上面的内容，并将其替换为映像路径（请注意，我只是使用了临时名称）：

此外，此文件正在删除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。

使用它非常简单。您可以呈现

Highchart

chart并将其保存为SVG、PNG、JPEG或PDF格式。下面的示例将演示图同时呈现为SVG和PDF：

var-system=require（'system'）；
var page=require（'webpage'）。create（）；
var fs=需要（'fs'）；
//加载JS库
page.injectJs（“js/jquery.min.js”）；
page.injectJs（“js/highcharts/highcharts.js”）；
page.injectJs（“js/highcharts/exporting.js”）；
//图表演示
变量args={
宽度：600，
身高：500
};
var svg=page.evaluate（函数（opt）{
$（'body'）。前缀（“”）；
var图表=新的Highcharts.图表({
图表：{
renderTo:'容器'，
宽度：opt.width，
高度：选择高度
},
出口：{
已启用：false
},
标题：{
文本：“组合图表”
},
xAxis：{
类别：[‘苹果’、‘橘子’、‘梨’、‘香蕉’、‘李子’]
},
亚克斯：{
标题：{
文本：“Y值”
}
},
标签：{
项目：[{
html:‘水果总消费量’，
风格：{
左：“40px”，
顶部：“8px”，
颜色：“黑色”
}
}]
},
打印选项：{
行：{
数据标签：{
已启用：true
},
enableMouseTracking:false
},
系列：{
enableMouseTracking:false，
影子：错，
动画：错误
}
},
系列：[{
键入：“列”，
姓名：'安德烈'，
数据：[3,2,1,3,4]
}, {
键入：“列”，
姓名：'费边'，
数据：[2,3,5,7,6]
}, {
键入：“列”，
姓名：“琼”，
数据：[4,3,3,9,0]
}, {
类型：“样条线”，
名称：'平均'，
数据：[3,2.67,3,6.33,3.33]，
标记：{
线宽：2，
线条颜色：“白色”
}
}, {
键入“pie”，
名称：“总消耗量”，
数据：[{
姓名：'安德烈'，
y:13，
颜色：“#4572A7”
}, {
姓名：'费边'，
y:23，
颜色：“#AA4643”
}, {
姓名：“琼”，
y:19，
颜色：“#89A54E”
}],
中间：[100,80]，
尺码：100，
showInLegend:false，
数据标签：{
已启用：false
}
}]
});
return chart.getSVG（）；
}，args）；
//将SVG保存到文件
编写（“demo.svg”，svg）；
//萨瓦
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;
    }
});

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