如何使用highcharts在服务器上保存图表的图像？ [英] How to save an image of the chart on the server with highcharts?
问题描述
有了highcharts，你有一个内置的按钮来下载当前的图表（例如：。您可以渲染 Highchart 图表并将其保存为SVG，PNG，JPEG或PDF。下面的示例同时演示了一个演示 Highcharts 图表到SVG和PDF：
var system = require（'system'）;
var page = require（'webpage'）。create（）;
var fs = require（'fs'）;
//加载JS库
page.injectJs（js / jquery.min.js）;
page.injectJs（js / highcharts / highcharts.js）;
page.injectJs（js / highcharts / exporting.js）;
//图表演示
var args = {
width：600，
height：500
};
var svg = page.evaluate（function（opt）{
$（'body'）。prepend（'< div id =container>< / div>' ）;
var chart = new Highcharts.Chart（{
图：{
renderTo：'container'，
width：opt.width，
身高：opt.height
}，
导出：{
启用：false
}，
标题：{
text：'组合图'
$ b xAxis：{
categories：['Apples'，'Oranges'，'Pears'，'Bananas'，'Plums']
}，
yAxis： {
title：{
text：'Y值'
}
}，
标签：{
items：[{
html ：'总水果消费'，
风格：{
left：'40px'，
top：'8px'，
color：'black'
}
}]
}，
plotOptions：{
line：{
dataLabels：{
enabled：true
}，
enableMouseTracking：false
}，
series：{
enableMouseTracking：false，
shadow：false，
动画：false
}
}，
系列：[{
类型：'列'，
名称：'Andrii'，
数据：[3,2,1 ，3，4]
}，{
类型：'列'，
名称：'Fabian'，
数据：[2,3,5,7,6]
}，{
type：'column'，
name：'Joan'，
data：[4，3，3，9，0]
}，{
类型：'spline'，
名称：'Average'，
数据：[3， 2.67,3,6.33,3.33]，
标记：{
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'
}]，
中心：[100，80]，
大小：100，
showInLegend：false，
dataLabels：{
enabled：false
}
}]
}）;
return chart.getSVG（）;
}，args）;
//将SVG保存到文件
fs.write（demo.svg，svg）;
//将图保存为PDF
page.render（'demo.pdf'）;
phantom.exit（）;
如果将代码另存为 demo.js ，然后运行 bin / phantomjs demo.js 来生成 demo.svg 和演示.pdf
With highcharts, you have a built-in button to download the current chart (example: http://www.highcharts.com/demo/, this button: ). You can save it as PNG, JPEG, PDF or SVG.
What I'd like to do is to create a link that saves the image on the server, instead of downloading it. How could I do that ?
I suppose that I have to modify the exportChart function in the exporting.src.js file. It looks like this (but I don't know javascript enough to do that) :
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);
},
It could be done really easy with PhantomJS. You can render Highchart chart and save it to SVG, PNG, JPEG or PDF. The example below renders a demo Highcharts diagram to SVG and PDF at the same time:
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();
If you save the code as demo.js, then just run bin/phantomjs demo.js to generate demo.svg and demo.pdf
这篇关于如何使用highcharts在服务器上保存图表的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
