Highcharts：在自定義布局中將多個圖表導出到 pdf

Question

我試圖將多個圖表導出到具有以下布局的單個 pdf。

正如http://jsfiddle.net/BlackLabel/b0jnqd0c/中所說，它運行良好

但是當我嘗試導出更多數量的圖表時，整個圖表都不會導出。 例如，如果我將 js fiddle 代碼中的行更改為：

$('#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

我認為這是因為所有 8 個圖表都不適合 PDF 的一頁（只有 6 個適合），當我將每個圖表的高度更改為 200px 然后導出時。 它工作正常，請參閱這個小提琴JSfiddle 。 如果您希望 PDF output 在兩頁中，您可以使用名為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 2

你想在下面的演示中實現類似的東西嗎？ 在我准備的演示中，我測試了 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 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>');
        }

但隨着寬度隨高度的增加，內容可能看起來更小。 如果在您有要導出的批量內容時這似乎是一個問題，您可以使用 go 使用多頁 pdf 選項進行導出。 添加了這個答案，以便它可以幫助某人。 我也在尋找如何為單頁連續 pdf 設置寬度的解決方案。