高级图表:在自定义布局中将多个图表导出为pdf

Question

我试图导出多个图表到一个pdf与以下布局。

​

正如在http://jsfiddle.net/BlackLabel/b0jnqd0c/中所说的，它运行得很好。

但是当我试图输出更多的图表时，整个图表都不会被导出。例如，如果我将js篡改代码中的行更改为：

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

试着导出8个图表，我的导出pdf遗漏了8个图表，并被限制为6个图表。

​

​

我的要求是将动态生成的全部图表导出为pdf，可能有任意数量的图表。此外，从图片中可以看到，这些图表不适合pdf页面。

Answer 1

您想在下面的演示中实现类似的目标吗？在我准备的演示中，我测试了17个图表的导出。

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

演示

Answer 2

我认为这是因为所有的8个图表不适合在一页的PDF (只有6个适合)，当我把每个图表的高度改为200 to，然后导出。它工作的很好，看这个小提琴JSfiddle。如果要在两页中输出PDF，可以使用一个名为jspdf的库。

以下是jspdf的示例代码。

$('#export_all').click(function () {
var doc = new jsPDF();

// chart height defined here so each chart can be placed
// in a different position
var chartHeight = 80;

// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.setFontSize(40);
doc.text(35, 25, "My Exported Charts");

//loop through each chart
$('.myChart').each(function (index) {
    var imageData = $(this).highcharts().createCanvas();

    // add image to doc, if you have lots of charts,
    // you will need to check if you have gone bigger 
    // than a page and do doc.addPage() before adding 
    // another image.

    /**
    * addImage(imagedata, type, x, y, width, height)
    */
    doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
});


//save with name
doc.save('demo.pdf');
});

想得到更多的解释。请参阅此链接

Answer 3

实际问题是页面维度的比例。如果html页面的宽度是'60'，那么页面的高度也会受到相应的限制，因此所有的数据溢出都是隐藏的。

设置宽度等于高度可以使所有内容显示。为此，请从以下位置更改导出pdf代码：

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

以下各点：

exportChart = function(i) {
        if (i === charts.length) {
          return callback('<svg height="' + top + '" width="' + top +
            '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>');
        }

但是，随着高度的增加，内容的尺寸可能会变小。如果这似乎是一个问题，当你有大量的内容导出，你可以去导出多页pdf选项。加上这个答案，这样就可以帮助别人了。我也在寻找一个解决方案，如何设置宽度单页连续pdf。