highcharts 2个图表HighChart打印成PDF

kuuvgm7e  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(199)

我有2个(或更多)图表在highchart和需要打印到PDF.我使用PDf导出形式highchrt,它可以打印,但只打印了1个图表.我的代码有什么问题?或任何解决我的问题?
这是我密码
第一个

感谢您的预付款

n3ipq98p

n3ipq98p1#

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

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

vsdwdz23

vsdwdz232#

要打印多个图表,您可以尝试下面的代码段。将图表数组作为参数传递给下面的函数。

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

您也可以参考下面的fiddle了解更多信息。http://jsfiddle.net/q5Rzu/147/

相关问题