javascript highcharts 重绘和回流不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23644998/
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
highcharts redraw and reflow not working
提问by user3634895
I am trying to build a dynamic page that has any number between 1-4 graphs on it that can be added or removed as needed but I have run into a huge problem and I can't seem to get the graph to resize after resizing the containing div. for example if I add a graph on the page it will be width 800, then click a button to add another graph it should resize to be 400 a piece but I cannot make it happen. As a very simplistic model I have the following
我正在尝试构建一个动态页面，其中包含 1-4 个图形之间的任意数量，可以根据需要添加或删除，但我遇到了一个大问题，并且在调整图形大小后似乎无法调整图形大小包含 div。例如，如果我在页面上添加一个图形，它的宽度为 800，然后单击一个按钮添加另一个图形，它应该将其调整为 400 块，但我无法实现。作为一个非常简单的模型，我有以下内容
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
width: 300
},
title: {
text: 'Width is set to 300px'
},
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]
}]
});
$('#resize').click(function() {
$('#container').attr('style', 'width: 800px');
$("#container").highcharts().reflow();
console.log($('#container').width());
});
});
now when that is run it will log 800 to the dev tools window in chrome but the graph will not resize. I have tried both redraw() and reflow() as suggested in the documentation for highcharts. I even setup a really quick demo on jsfiddle here, http://jsfiddle.net/7cbsV/can anyone please help me. It is kind of important. Thank you in advance for the help.
现在，当它运行时，它将在 chrome 中将 800 记录到开发工具窗口，但图形不会调整大小。我已经按照 highcharts 的文档中的建议尝试了 redraw() 和 reflow()。我什至在 jsfiddle 上设置了一个非常快速的演示，http://jsfiddle.net/7cbsV/任何人都可以帮助我。这有点重要。预先感谢您的帮助。
采纳答案by Pawe? Fus
回答by Asbar
Just remove the width of the chart from
只需从中删除图表的宽度
$('#container').highcharts({
chart: {
type: 'line',
width: 300
},
so that it is like this
所以它是这样的
$('#container').highcharts({
chart: {
type: 'line'
},
and set the container width to 300 like this
并像这样将容器宽度设置为 300
#container {
width: 300px;
}
then just resize the container div as you are already doing. the chart will resize according to the width of the container div.
然后就像你已经在做的那样调整容器 div 的大小。图表将根据容器 div 的宽度调整大小。
hope this helps.
希望这可以帮助。
