0

我有一个包含多个图表的页面。当我向下滚动打印图表时，页面将焦点返回到页面顶部，而不是我刚刚打印的图表。尚未在板上找到与此相关的任何内容，因此希望有人遇到此问题并提出建议。

这是一个例子：http: //jsfiddle.net/ND5xf/

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

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

1 回答 1

1

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

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
                 }
            }]
        }
    }
}

请参阅此处的小提琴（尝试第三张图表）。

于 2013-11-12T02:49:54.963 回答