Question

我有一张没有高度或宽度的图表。

当我点击打印按钮时，我想获得更高更大的图形。我尝试了setSize（），但由于我不知道我的图形的原始大小（因为没有），我不能像以前那样调整大小，我最终得到一个巨大的图形。我还尝试在另一个div中创建图表的副本（通过更改renderTo，width和height属性），但没有成功。已经好几个小时了，我都很困惑。

我应该怎样做才能拉伸我的图表以便在不修改原始图形的情况下进行打印？

感谢您的帮助。

Answer 1

对我而言，它运作正常，看看：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)

});

Answer 2

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

});

Answer 3

除了Pawel和Arthur的解决方案之外，您还可以使用this question中的解决方案来恢复自动调整大小功能。

我需要处理一个非常类似的问题（虽然在我的情况下它是打印整个页面，其中包含一个高图，而不是专门打印图表）

我遇到了各种有用的信息，未来的开发者可能会从中受益：

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

设置尺寸后返回自动调整大小： 在您打印后setSize()后，如果窗口发生变化，图表将不再自动调整大小。你可以通过使用＆＃39; hack＆＃39;来解决这个问题。详细说明： Is modifying chart.hasUserSize a bad idea after calling Chart.setSize()? 其中涉及设置chart.hasUserSize = false;

在打印事件之前和之后挂钩 处理此问题：Do modern browsers support onbeforeprint / onafterprint HTML events?，答案是（间接）是，但您必须结合使用onbeforeprint事件和watchMedia eventHandler API。

希望这对某人有价值吗？

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

3 个答案: