[英]highcharts redraw and reflow not working
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. 我正在尝试构建一个动态页面,其上有1-4个图形之间的任意数字,可以根据需要添加或删除但我遇到了一个巨大的问题,我似乎无法在调整大小后调整图形大小包含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. 例如,如果我在页面上添加一个图形,它将是宽度800,然后单击一个按钮添加另一个图形,它应该调整为400一块,但我不能实现它。 As a very simplistic model I have the following 作为一个非常简单的模型,我有以下几点
$(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. 现在,当它运行时,它会将800记录到chrome中的开发工具窗口,但图表不会调整大小。 I have tried both redraw() and reflow() as suggested in the documentation for highcharts. 我已按照highcharts文档中的建议尝试了redraw()和reflow()。 I even setup a really quick demo on jsfiddle here, http://jsfiddle.net/7cbsV/ can anyone please help me. 我甚至在jsfiddle上设置了一个非常快速的演示, http://jsfiddle.net/7cbsV/任何人都可以帮助我。 It is kind of important. 这很重要。 Thank you in advance for the help. 提前感谢您的帮助。
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. 然后就像你正在做的那样调整容器div的大小。 the chart will resize according to the width of the container div. 图表将根据容器div的宽度调整大小。
hope this helps. 希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.