我一直在玩Highcharts
(v3.0.10)在网页上呆了一周,打印页面时无法重新绘制图表。问题是我在图表中使用深色背景颜色,但在打印时,我想将其更改为白色。为了实现这一点,我需要redraw()
更改后我的图表backgroundColor
财产。问题是,当我这样做时,打印预览的背景颜色会发生变化,但数据不见了,由于某种原因它不会被重绘。
Before尝试更改背景颜色,我一直在对容器 div 大小进行一些修改并调用reflow()
让图表调整为 A4 页面,在预览打印页面时效果非常好:容器的大小正是我想要的,图表成功地回流到新的大小。
当我希望背景变白并添加redraw()
当用户尝试打印页面时触发的回调方法。集装箱仍然reflow()
正确并且背景变为白色,但是图表上缺少数据。
我创建了一个样本小提琴你可以在这里评论 https://jsfiddle.net/eae72xuw/7/。它适用于 Chrome 和 Firefox(我的意思是你可以重现这个问题)。为了预览我提供的这个小提琴,只需去尝试打印小提琴页与您的浏览器一起使用,因此会出现页面打印预览窗口。
添加了一些Firefox打印页面预览和数据消失的截图在这个链接上 https://i.stack.imgur.com/NFdEw.jpg.
另请注意Highcharts
我正在使用的版本:3.0.10
。它不是最新的,但使用我拥有的当前许可证无法获得更高的版本。
一些代码和东西
打印处理程序和用户尝试打印时执行的代码:
/** Chrome **/
if (window.matchMedia) {
var mediaQueryList = window.matchMedia('print');
mediaQueryList.addListener(function (mql) {
if (mql.matches) {
resize();
} else {
unresize();
}
});
}
// Firefox
if (window.onbeforeprint !== undefined && window.onafterprint !== undefined) {
window.onbeforeprint = function() {
resize();
}
window.onafterprint = function() {
unresize();
}
}
var originalBackground = '#333';
function resize(){
// Do some transformations to fit an A4 page that
//are not the matter of this question
// ......
//......
// Loop through all containers (only two but anyways...)
// and apply changes
$('.graph-container').each(function(i,e){
let chart = $(e).highcharts();
chart.options.chart.backgroundColor = '#FFFFFF';
// Create new chart with background color
$(e).highcharts(chart.options);
// Force redraw
$(e).highcharts().redraw();
});
}
function unresize(){
$('.graph-container').each(function(i,e){
let chart = $(e).highcharts();
// Revert background to original color #333
chart.options.chart.backgroundColor = originalBackground;
$(e).highcharts(chart.options);
$(e).highcharts().redraw();
});
}
None
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)