Javascript 我构建了同步图表（highcharts），并希望将其导出到一个PDF中

好的，我用测试数据构建同步图表。一切都很完美。我唯一的问题是，我想在一个PDF中导出它们，但我只能选择单独导出。因此，我内置了一个按钮，它可以获取数组中的图表，并将其导出为PDF格式，但它不想工作

这是我拥有的构建图表的JS

    function clickModal(test) {
                    document.getElementById("myModal").style.display = "block";
                    // Call the AJAX function that start the chart procedures
                    getAjaxData(test);
                }

                // HIGHCHART FUNCTIONALITY STARTS HERE
                ['mousemove', 'touchmove', 'touchstart'].forEach(function (eventType) {
                    document.getElementById('container').addEventListener(
                        eventType,
                        function (e) {
                            var chart,
                                point,
                                i,
                                event;

                            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                                chart = Highcharts.charts[i];
                                // Find coordinates within the chart
                                event = chart.pointer.normalize(e);
                                // Get the hovered point
                                point = chart.series[0].searchPoint(event, true);

                                if (point) {
                                    point.highlight(e);
                                }
                            }
                        }
                    );
                });

                /**
                * Override the reset function, we don't need to hide the tooltips and
                * crosshairs.
                */
                Highcharts.Pointer.prototype.reset = function () {
                    return undefined;
                };

                /**
                * Highlight a point by showing tooltip, setting hover state and draw crosshair
                */
                Highcharts.Point.prototype.highlight = function (event) {
                    event = this.series.chart.pointer.normalize(event);
                    this.onMouseOver(); // Show the hover marker
                    this.series.chart.tooltip.refresh(this); // Show the tooltip
                    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
                };

                /**
                * Synchronize zooming through the setExtremes event handler.
                */
                function syncExtremes(e) {
                    var thisChart = this.chart;

                    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
                        Highcharts.each(Highcharts.charts, function (chart) {
                            if (chart !== thisChart) {
                                if (chart.xAxis[0].setExtremes) { // It is null while updating
                                    chart.xAxis[0].setExtremes(
                                        e.min,
                                        e.max,
                                        undefined,
                                        false,
                                        { trigger: 'syncExtremes' }
                                    );
                                }
                            }
                        });
                    }
                }

    function getAjaxData(test){
                    $.getJSON('datasync.php', function(chartData, tstSuccess) {
                        // Display the results of the getJSON call to data.php
                        document.getElementById("json1").innerHTML = JSON.stringify(tstSuccess, undefined, 2);
                        document.getElementById("json").innerHTML = JSON.stringify(chartData, undefined, 2);
                        var charts1 = {}; // global variable 
                        var index = 0;
                        // Loop through each dataset in the returned JSON
                        chartData.datasets.forEach(function (dataset, i) {

                            // Add X values
                            dataset.data = Highcharts.map(dataset.data, function (val, j) {
                                return [chartData.xData[j], val];
                            });

                            // Create a child div for each dataset that is returned
                            var chartDiv = document.createElement('div');
                            chartDiv.className = 'chart';
                            document.getElementById('container').appendChild(chartDiv);

                            charts1[index] = Highcharts.chart(chartDiv, {
                                chart: {
                                    marginLeft: 40, // Keep all charts left aligned
                                    spacingTop: 20,
                                    spacingBottom: 20
                                },
                                exporting: {
                                    buttons: {
                                    contextButton: {
                                        menuItems: [
                                        'downloadPDF',
                                        'viewData'
                                        ]
                                        }
                                    }
                                },
                                title: {
                                    text: dataset.name,
                                    align: 'left',
                                    margin: 0,
                                    x: 30
                                },
                                credits: {
                                    enabled: false
                                },
                                legend: {
                                    enabled: false
                                },
                                xAxis: {
                                    crosshair: true,
                                    events: {
                                        setExtremes: syncExtremes
                                    },
                                    labels: { 
                                        //format: '{value} km'
                                        format: ' '
                                    }
                                },
                                yAxis: {
                                    title: {
                                        text: null
                                    }
                                },
                                tooltip: {
                                    positioner: function () {
                                        return {
                                            // right aligned
                                            x: this.chart.chartWidth - this.label.width - 40,
                                            y: 10 // align to title
                                        };
                                    },
                                    borderWidth: 0,
                                    backgroundColor: 'none',
                                    pointFormat: '{point.y}',
                                    headerFormat: '',
                                    shadow: false,
                                    style: {
                                        fontSize: '18px'
                                    },
                                    valueDecimals: dataset.valueDecimals
                                },
                                series: [{
                                    data: dataset.data,
                                    name: dataset.name,
                                    type: dataset.type,
                                    color: Highcharts.getOptions().colors[i],
                                    fillOpacity: 0.3,
                                    tooltip: {
                                        valueSuffix: ' ' + dataset.unit
                                    }
                                }]
                            });
                        });
                        index++;
                    });
                }
                $('#export-pdf').click(function() {
                    Highcharts.exportCharts([charts1[0], charts1[1]], {
                    type: 'application/pdf'
                    });
                });

功能点击模式（测试）{
document.getElementById（“myModal”）.style.display=“block”；
//调用启动图表过程的AJAX函数
getAjaxData（测试）；
}
//HIGHCHART功能从这里开始
['mousemove'、'touchmove'、'touchstart'].forEach（函数（eventType）{
document.getElementById（'container'）.addEventListener(
事件类型，
职能（e）{
var图，
指向
我
事件
对于（i=0；i
    <div id="myModal" class="modal">
                <div class="modal-content">
                    <span class="close">&times;</span>
                    <div id="container">
                    <button id="export-png">Export to PNG</button>
                    </div>
                </div>
            </div>

    Highcharts.getSVG = function(charts) {
        var svgArr = [],
            top = 0,
            width = 0;

        $.each(charts, function(i, chart) {
            var svg = chart.getSVG();

            svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            svg = svg.replace('-9000000000', '-999'); // Bug in v4.2.6

            top += chart.chartHeight;
            width = Math.max(width, chart.chartWidth);

            svgArr.push(svg);
        });

        return '<svg height="'+ top +'" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
    };

    /**
     * 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) {

        // Merge the options
        options = Highcharts.merge(Highcharts.getOptions().exporting, options);

        // Post to export server
        Highcharts.post(options.url, {
            filename: options.filename || 'chart',
            type: options.type,
            width: options.width,
            svg: Highcharts.getSVG(charts)
        });
    };

Highcharts.chart(chartDiv, {
    chart: {
              marginLeft: 40, // Keep all charts left aligned
              spacingTop: 20,
              spacingBottom: 20
            },

charts1[index] = Highcharts.chart(chartDiv, {
       chart: {
               marginLeft: 40, // Keep all charts left aligned
               spacingTop: 20,
               spacingBottom: 20
               },

$('#export-pdf').click(function() {
      Highcharts.exportCharts(Highcharts.charts, {
      type: 'application/pdf'
   });
});