Highchart在打印时没有调整大小

时间:2016-02-11 14:04:43

标签: javascript jquery css angularjs highcharts

Highchart已集成到angularjs指令中。该指令仅打印元素的内容。以下是指令代码。从Here

获取代码
// if there is no printing section, create one
        if (!printSection) {
            printSection = document.createElement('div');
            printSection.id = 'printSection';
            document.body.appendChild(printSection);
        }

        function link(scope, element, attrs) {
            element.on('click', function () {
                var elemToPrint = document.getElementById(attrs.printElementId);
                if (elemToPrint) {
                    printElement(elemToPrint);
                    // tried to resize chart wich chart.setSize() and it works here
                    window.print();
                }
            });

            window.onafterprint = function () {
                // clean the print section before adding new content
                // when I tried to resize the chart back to normal size, it doesn't work
            }
        }

        function printElement(elem) {
            // clones the element you want to print
            var domClone = elem.cloneNode(true);
            printSection.appendChild(domClone);
        }

        return {
            link: link,
            restrict: 'A'
        };

以下是正在使用的CSS:

@media screen {
    #printSection {
        display: none;
    }
}

@media print {
    body * {
        visibility:hidden;
    }
    #printSection, #printSection * {
        visibility:visible;
    }
    #printSection {
        position:absolute;
        left:0;
        top:0;
    }
}

除了图表外,所有内容都在页面上正确打印。图表正在逐渐减少。据我所知,高图响应但在打印布局中无法正常工作。

window.onafterprint中,图表的大小调整仅适用于第一次。在随后的打印调用中,新的图表元素将添加到dom。

我在这里缺少什么?我是否需要调整图表大小或重绘?在哪里调整大小或重绘它?我是否需要将css应用于高图元素?

0 个答案:

没有答案