Question

我有一个包含多个图表的页面。当我向下滚动以打印图表时，页面将焦点返回到页面顶部，而不是我刚刚打印的图表。没有在与此相关的董事会上找到任何东西，所以希望有人遇到这个并提出建议。

向下滚动到第三个图表并选择打印。您可以打印它或取消窗口。该页面将焦点返回到第一个图表。

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<div id="container3" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

使用Javascript：

$(function () {
    $('#container1').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Line Chart'
        },
        xAxis: {
            categories: ['Category 1', 'Category 2', 'Category 3']
        },
        series: [{
            data: [7.0, 6.9, 9.5]
        }, {
            data: [-0.2, 0.8, 5.7]
        }]
    });
});

$(function () {
    $('#container2').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Bar Chart'
        },
        xAxis: {
            categories: ['Category 1', 'Category 2', 'Category 3']
        },
        series: [{
            data: [107, 31, 635]
        }, {
            data: [133, 156, 947]
        }]
    });
});

$(function () {
    $('#container3').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column Chart'
        },
        xAxis: {
            categories: ['Category 1', 'Category 2', 'Category 3']
        },
        series: [{
            data: [49.9, 71.5, 106.4]

        }, {
            data: [83.6, 78.8, 98.5]
        }]
    });
});

Answer 1

Highcharts通过隐藏页面上的其他内容然后打印来打印单个图表。看起来在DOM元素的 shuffle 中，忘记了潜在的滚动条。我能看到的唯一修复（不修改源代码）是自己控制打印并重置滚动位置。

exporting: {
    buttons: {
        contextButton: {
            menuItems: [{
                 text: 'Print Chart',
                 onclick: function() {
                     var scrollPos = $(document).scrollTop();
                     this.print();
                     setTimeout(function(){
                          $(document).scrollTop(scrollPos)
                     }, 1001); // Highcharts has a 1s delay before display elements again
                 }
            }]
        }
    }
}

请参阅小提琴here（尝试第3张图表）。

从Highcharts打印将焦点返回到页面顶部

1 个答案: