/**
* Create a global getSVG method that takes an array of charts as an argument. The SVG is returned as an argument in the callback.
*/
Highcharts.getSVG = function (charts, options, callback) {
var svgArr = [],
top = 0,
width = 0,
addSVG = function (svgres) {
// Grab width/height from exported chart
var svgWidth = +svgres.match(
/^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
svgHeight = +svgres.match(
/^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
)[1],
// Offset the position of this chart in the final SVG
svg = svgres.replace('<svg', '<g transform="translate(0,' + top + ')" ');
svg = svg.replace('</svg>', '</g>');
top += svgHeight;
width = Math.max(width, svgWidth);
svgArr.push(svg);
},
exportChart = function (i) {
if (i === charts.length) {
return callback('<svg height="' + top + '" width="' + width +
'" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
}
charts[i].getSVGForLocalExport(options, {}, function () {
console.log("Failed to get SVG");
}, function (svg) {
addSVG(svg);
return exportChart(i + 1); // Export next only when this SVG is received
});
};
exportChart(0);
};
/**
* 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) {
options = Highcharts.merge(Highcharts.getOptions().exporting, options);
// Get SVG asynchronously and then download the resulting SVG
Highcharts.getSVG(charts, options, function (svg) {
Highcharts.downloadSVGLocal(svg, options, function () {
console.log("Failed to export on client side");
});
});
};
function printCharts(charts) {
var origDisplay = [],
origParent = [],
body = document.body,
childNodes = body.childNodes;
// hide all body content
Highcharts.each(childNodes, function(node, i) {
if (node.nodeType === 1) {
origDisplay[i] = node.style.display;
node.style.display = "none";
}
});
// put the charts back in
$.each(charts, function(i, chart) {
origParent[i] = chart.container.parentNode;
body.appendChild(chart.container);
});
// print
window.print();
// allow the browser to prepare before reverting
setTimeout(function() {
// put the chart back in
$.each(charts, function(i, chart) {
origParent[i].appendChild(chart.container);
});
// restore all body content
Highcharts.each(childNodes, function(node, i) {
if (node.nodeType === 1) {
node.style.display = origDisplay[ki];
}
});
}, 500);
}
2条答案
按热度按时间n3ipq98p1#
默认情况下不支持导出多个图表,需要进行一些自定义。下面是您所需的官方示例:
此外,Highcharts论坛上的这个主题可能对您有用:https://www.highcharts.com/forum/viewtopic.php?f=9&t=40493&p=140426&hilit=layout#p140426
现场演示:http://jsfiddle.net/gh/get/jquery/1.7.2/highcharts/highcharts/tree/master/samples/highcharts/exporting/multiple-charts-offline/
文件:https://www.highcharts.com/docs/getting-started/frequently-asked-questions#export-multiple
vsdwdz232#
要打印多个图表,您可以尝试下面的代码段。将图表数组作为参数传递给下面的函数。
您也可以参考下面的fiddle了解更多信息。http://jsfiddle.net/q5Rzu/147/