2 диаграммы HighChart Печать в PDF

Question

У меня есть 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