感谢前进

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

2图表HighChart打印为PDF

感谢前进

1 个答案: