Javascript 2图表高度图表打印为PDF

Javascript 2图表高度图表打印为PDF,javascript,pdf,charts,highcharts,printing,Javascript,Pdf,Charts,Highcharts,Printing,我在highchart上有2张(或更多)图表,需要打印成PDF格式。我使用PDf导出形式highchrt,它可以打印,但只打印1个图表。我的代码怎么了? 或者我的问题有什么解决办法 这是我的密码 $(函数(){ window.chart=新的Highcharts.chart({ 图表:{renderTo:'container1'}, 标题:{ 文本:“导出模块已加载,但按钮已禁用” }, xAxis:{ 类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月] },

我在highchart上有2张(或更多)图表,需要打印成PDF格式。我使用PDf导出形式highchrt,它可以打印,但只打印1个图表。我的代码怎么了? 或者我的问题有什么解决办法

这是我的密码

$(函数(){
window.chart=新的Highcharts.chart({
图表:{renderTo:'container1'},
标题:{
文本:“导出模块已加载,但按钮已禁用”
},
xAxis:{
类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列:[{
数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}],
出口:{
已启用:true
}
});
window.chart=新的Highcharts.chart({
图表:{renderTo:'container2'},
标题:{
文本:“导出模块已加载,但按钮为123123”
},
xAxis:{
类别:[一月、二月、三月、四月、五月、六月、七月、八月、九月、十月、十一月、十二月]
},
系列:[{
数据:[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]
}],
出口:{
已启用:true
}
});
$(“#export2pdf”)。单击(函数(){
图表({
键入:“application/pdf”,
文件名:“我的pdf”
});
});
});

<

默认情况下不支持导出多个图表,需要进行一些自定义。您可以在下面找到您需要的官方示例:

/**
 * 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");
        });
    });
};
/**
*创建一个全局getSVG方法,该方法将一组图表作为参数。SVG在回调中作为参数返回。
*/
Highcharts.getSVG=函数(图表、选项、回调){
var svgArr=[],
top=0,
宽度=0,
addSVG=函数(svgres){
//从导出的图表中获取宽度/高度
var svgWidth=+svgres.match(
/^]*宽度\s*=\s*\“?(\d+\”?[^>]*>/
)[1],
svgHeight=+svgres.match(
/^]*高度\s*=\s*\“?(\d+)\”?[^>]*>/
)[1],
//偏移此图表在最终SVG中的位置

svg=svgres.replace(“默认情况下不支持导出多个图表,需要一些自定义。下面是您需要的官方示例:

/**
 * 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");
        });
    });
};
/**
*创建一个全局getSVG方法,该方法将一组图表作为参数。SVG在回调中作为参数返回。
*/
Highcharts.getSVG=函数(图表、选项、回调){
var svgArr=[],
top=0,
宽度=0,
addSVG=函数(svgres){
//从导出的图表中获取宽度/高度
var svgWidth=+svgres.match(
/^]*宽度\s*=\s*\“?(\d+\”?[^>]*>/
)[1],
svgHeight=+svgres.match(
/^]*高度\s*=\s*\“?(\d+)\”?[^>]*>/
)[1],
//偏移此图表在最终SVG中的位置
svg=svgres.replace('