2 圖表 HighChart 打印到 PDF

Question

我在 highchart 上有 2 個（或更多）圖表，需要打印到 PDF。 我使用 PDf 導出表格 highchrt，它可以打印但只打印 1 個圖表。 我的代碼有什么問題？ 或我的問題的任何解決方案？

這是我的代碼。

 $(function () { window.chart = new Highcharts.Chart({ chart: {renderTo : 'container1'}, title: { text: 'Exporting module is loaded but buttons are disabled' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], exporting: { enabled: true } }); window.chart = new Highcharts.Chart({ chart: {renderTo : 'container2'}, title: { text: 'Exporting module is loaded but buttons are 123123123' }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] }], exporting: { enabled: true } }); $("#export2pdf").click(function(){ chart.exportChart({ type: 'application/pdf', filename: 'my-pdf' }); }); });

 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script src="https://code.highcharts.com/modules/offline-exporting.js"></script> <div id="container1" class="chart"></div> < <div class="spacer"></div> <div id="container2" class="chart"></div> <button id="export2pdf">Export to PDF</button>

感謝提前

Answer 1

默認情況下不支持導出多個圖表，它需要一些自定義。 您可以在下面找到您需要的官方示例：

/**
 * 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");
        });
    });
};

此外，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

Answer 2

要打印多個圖表，您可以嘗試以下代碼段。 將圖表數組作為參數傳遞給下面的函數。

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

您還可以參考下面的小提琴以獲取更多信息。 http://jsfiddle.net/q5Rzu/147/