使用Highcharts在打印前调整图表大小

Question

我有一个没有高度或宽度的图表。 当我点击打印按钮时，我希望获得更高和更大的图表。我尝试过setSize()，但由于我不知道我的图表的原始大小（因为没有），我无法像以前那样调整它的大小，结果得到了一个巨大的图表。 我还尝试在另一个div中创建图表的副本（通过改变renderTo、width和height属性），但没有成功。几个小时过去了，我感到很困惑。 我应该怎么做才能拉伸我的图表，以便在不修改原始图表的情况下打印它？ 谢谢您的帮助。

- Grégoire Borel

---

您想打印特定尺寸的图表吗？ - srijan

你最好的选择是首先使用chart.setSize()调整图表的大小，以适合您想要打印的尺寸。然后调用chart.print()进行打印。打印完成后将图表大小调整回旧尺寸... - srijan

我找到了一些原始尺寸。我尝试了这段代码（使用和不使用setTimeout），但setSize似乎被忽略了（print是有效的）。 this.setSize(1550, 900); this.print(); this.setSize(350, 290); - Grégoire Borel

我想我知道为什么setSize无法工作了。HighCharts的一位官方开发人员说，resize事件只会在浏览器中的图表中发生。然而，print（）不考虑之前触发的事件。 - Grégoire Borel

Answer 1

Pawel的小提琴在IE上无法正常工作，因为它在打印之前执行了第二个setSize。您需要设置一个超时来确保大小在打印后发生。

这个链接可以正常工作：http://jsfiddle.net/6hyfk/34/

$('#container').highcharts({
    series: [{

        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    setTimeout(function() {
        chart.setSize(600,500, false);
    }, 1000);

});

- Arthur Ouaki

Answer 2

对我而言，它很好用，请看：http://jsfiddle.net/Fusher/6hyfk/6/ 可能是您在错误的位置设置了大小，提供一些代码会更有帮助（最好使用jsfiddle）。

$('#container').highcharts({
    series: [{

        data: [1, 2, 3]        
    }]
});

$("#b").click(function() {
    var chart = $('#container').highcharts();

    chart.setSize(200,500, false);
    chart.print();
    chart.setSize(600,500, false)

});

- Paweł Fus

Answer 3

除了Pawel和Arthur的解决方案外，您还可以使用此问题中的解决方案来实现自动调整大小功能。

我曾经遇到过非常类似的问题(尽管在我的情况下是打印整个页面，其中包含一个highchart，而不是专门打印图表)。

我发现了各种有用的信息，未来的开发人员可能会从中受益:

提取当前图表大小: 为了在打印后重置图表，您可以通过调用chart.chartHeight或chart.chartWidth(其中var chart = $('#chart-container').highcharts();)来收集(因此存储以供稍后重置)图表的当前大小。

设置大小后返回自动调整大小: 在调用setSize()进行打印后，如果窗口更改，图表将不再自动调整大小。您可以使用此处详细介绍的'黑客'来修复： 在调用Chart.setSize()后修改chart.hasUserSize是否是一种不好的做法？ 其中包括设置chart.hasUserSize=false; 挂钩before和after打印事件 在此问题上处理：现代浏览器是否支持onbeforeprint/onafterprint HTML事件？答案是(间接)肯定的，但您必须使用onbeforeprint事件和watchMedia事件处理程序API的组合。

希望对某人有价值？

- Brondahl