Текущий У меня есть этот пример экспорта 2 диаграмм: http://jsfiddle.net/highcharts/gd7bB/1/
Это моя версия, но я застрял, как обернуть var chart1 = new Highcharts.Chart({});, чтобы можно было запустить функцию SVG ...
$(document).ready(function () {
var url = window.location.href;
url = url.split("/");
url.pop();
url = url.join("/");
var link = url;
/**
* 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, charts) {
var svg = charts.getSVG();
svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')"');
svg = svg.replace('</svg>', '</g>');
top += charts.chartHeight;
width = Math.max(width, defaultCharts.chartWidth);
svgArr.push(svg);
});
return '<svg height="'+ (top + 100) +'" width="' + width
+ '" version="1.1" xmlns="http://www.w3.org/2000/svg">'
+ svgArr.join('')
+ '<text class="highcharts-title"
text-anchor="middle" y="'+ (top + 20) +'" x="225">
<tspan x="225">this is the disclaimer</tspan>
</text></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: options.width,
svg: svg
}[name]
}, null, form);
});
console.log(svg); //return;
// submit
form.submit();
// clean up
form.parentNode.removeChild(form);
};
$('#export').click(function() {
Highcharts.exportCharts([chart[1], chart[2]]);
});
// Define a default set of chart options
var defaultChart = {
chart: {
renderTo: 'chart'
},
title: {
text: 'Chart'
},
plotArea: {
shadow: null,
borderWidth: null,
backgroundColor: null
},
tooltip: {
formatter: function() {
return '<b>' + this.point.name + '</b>: '
+ this.y.toFixed(2) + ' % / £' + this.point.mv;
}
},
exporting: {
enabled:false
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
showInLegend: true,
dataLabels: {
enabled: true,
formatter: function() {
if( this.point.name != undefined)
return '' + this.y.toFixed(2) + '%';
else
return false;
}
}
}
},
credits: {
enabled: false,
text: 'Newton.co.uk'
},
legend: {
verticalAlign: 'bottom',
x: 100,
y: 0,
width: '100%',
itemWidth: '100%',
floating: false,
labelFormatter: function() {
return this.name + ': ' + this.y.toFixed(2) + ' %';
},
borderWidth: 0,
margin: 0,
lineHeight: 50
},
series: []
};
// Create a function that will fetch the data
// and create the chart based on passed options
function makeChart( url, chart, options ) {
$.getJSON(link + url, null, function(items) {
var valuations = items.valuations;
var series = {
type: 'pie',
name: '',
data: []
};
$.each(valuations, function(itemNo, item) {
series.data.push({
name: item.id,
y: parseFloat(item.percentageMarketValue),
mv: item.marketValue
})
});
options.series.push(series);
chart = new Highcharts.Chart(options);
//chart.render();
});
}
var chartlist = new Array('','Industry','Geographic');
var chart = new Array();
chart[1];
chart[2];
for (i=1; i<3; i++) {
console.log(chart[i]);
//Set up chart1's custom options
chart[i] = {
chart: {
renderTo: 'container' + i
},
title: {
text: chartlist[i]
}
}
// Call our new function to make the chart
makeChart("/valuations/" + chartlist[i].toLowerCase() + ".json",
chart[i], $.extend(true, {}, defaultChart, chart[i]) );
}
/*
//Set up chart1's custom options
var chart1 = {
chart: {
renderTo: 'container1'
},
title: {
text: 'Industry'
}
}
// Call our new function to make the chart
makeChart("/valuations/industry.json",
chart1, $.extend(true, {}, defaultChart, chart1) );
// Setup chart2's custom options
var chart2 = {
chart: {
renderTo: 'container2'
},
title: {
text: 'Geographic'
}
}
// Call our new function to make the chart
makeChart("/valuations/geographic.json",
chart2, $.extend(true, {}, defaultChart, chart2) );
*/
Highcharts.setOptions({
colors: ['#9E8F6C', '#7BA1CD', '#666666', '#A2B021',
'#DC7000', '#336666', '#FF9655', '#999999']
});
});