Highcharts:以自定义布局将多个图表导出为pdf [英] Highcharts : Export multiple charts to pdf in custom layout

问题描述

我正尝试将多个图表导出为具有以下布局的pdf.

I was trying to export multiple charts to a single pdf with the following layout.

如 http://jsfiddle.net/BlackLabel/b0jnqd0c/

但是当我尝试导出更多数量的图表时，不会导出整个图表.例如，如果我将js小提琴代码中的行更改为:

But when I try to export more number of charts, the entire charts are not exported. For example, if I change the lines in js fiddle code to :

$('#export-pdf').click(function() {
    Highcharts.exportCharts([chart1, chart2, chart3, chart4, chart1, chart2, chart3, chart4], {
      type: 'application/pdf'
    });
  });

并尝试导出8个图表，我的导出pdf缺少8个图表，并且仅限于6个图表.

And try to export 8 charts, my export pdf is missing the 8 charts and is restricted to 6 charts.

我的要求是将动态生成的整个图表导出为pdf，可能有任意数量的图表. 同样如图所示，图表也不适合pdf页面.

My requirement is to export the whole bunch of charts that are dynamically generated to pdf, there may be any number of charts. Also as seen in image, the charts are not fit to pdf page.

推荐答案

您想在下面的演示中实现类似功能吗?在我准备的演示中，我测试了17张图表的导出.

Would you like to achieve something like in the demo below? In the demo which I prepared, I tested exporting of 17 charts.

Highcharts.getSVG = function(charts) {
 var svgArr = [],
     top = 0,
     width = 0,
     endWidth = 0;

Highcharts.each(charts, function(chart) {
var svg = chart.getSVG(),
  // Get width/height of SVG for export
  svgWidth = +svg.match(
    /^<svg[^>]*width\s*=\s*\"?(\d+)\"?[^>]*>/
  )[1],
  svgHeight = +svg.match(
    /^<svg[^>]*height\s*=\s*\"?(\d+)\"?[^>]*>/
  )[1];

svg = svg.replace(
  '<svg',
  '<g transform="translate(' + width + ', ' + top + ')" '
);

svg = svg.replace('</svg>', '</g>');

width += svgWidth;
endWidth = Math.max(endWidth, width)

if (width === 2 * svgWidth) {
  width = 0;
  top += svgHeight;
}

svgArr.push(svg);
});
 top += 400;
 return '<svg height="' + top + '" width="' + endWidth +
'" version="1.1" xmlns="http://www.w3.org/2000/svg">' +
svgArr.join('') + '</svg>';
};

演示

这篇关于Highcharts:以自定义布局将多个图表导出为pdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！