javascript Highchart - 调整窗口大小后重绘图表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23082319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highchart - Redraw Chart after Window is resized
提问by Philipp
on my webpage is a chart drawn with Highchart. Now, if i resize my whole window i want this chart to adjusts its size (especially the width). The Code looks similar to this:
我的网页上有一张用 Highchart 绘制的图表。现在，如果我调整整个窗口的大小，我希望此图表调整其大小（尤其是宽度）。代码看起来类似于：
window.onresize=function(){resized();}
function resized()
{
$("#container").highcharts().redraw();
}
If I overwrite the redraw event (with something like "alert("resized");") I will get a result so the method should be called - but the chart doesn't changes its size. I also tried to set the charts size manually with
如果我覆盖重绘事件（类似“alert("resized");”），我会得到一个结果，因此应该调用该方法 - 但图表不会改变其大小。我还尝试手动设置图表大小
$("#container").highcharts().setSize(width, height, false);
But both ways didn't work. Is there any other solution?
但是这两种方式都没有用。还有其他解决方案吗？
回答by Chetan Singhal
Did you try code in this manner so it will automatically handle chart resizing on window resize.
您是否以这种方式尝试过代码，以便它会在调整窗口大小时自动处理图表大小调整。
// create the chart
var chart = Highcharts.chart('container', {
chart: {
events: {
redraw: function () {
var label = this.renderer.label('The chart was just redrawn', 100, 120)
.attr({
fill: Highcharts.getOptions().colors[0],
padding: 10,
r: 5,
zIndex: 8
})
.css({
color: '#FFFFFF'
})
.add();
setTimeout(function () {
label.fadeOut();
}, 1000);
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
