我想要一个使用浏览器窗口调整大小的图表,但问题是高度固定为400px.这个JSFiddle示例有同样的问题.
我怎样才能做到这一点?我尝试使用chart.events.redraw事件处理程序来调整图表的大小(使用.setSize),但我猜它会启动一个永无止境的循环(fire事件处理程序,它调用setSize,它会触发另一个事件处理程序等).
调整容器大小时,我有两个问题用于图表渲染.
首先,如何在调整容器大小时正确呈现图表.
即最大化/恢复问题,在它的第一次渲染它工作正常,但是当我恢复窗口的大小时,图表开始叠加为其先前的大小.从下面的图片可以看出:


我知道如果你设置一个调整大小处理程序(并等待一小段时间),只要调整窗口大小,刷新图表,就可以解决问题.我在想是否有其他方法让图表流动到正确的大小,而不是每次刷新图表.
的第二件事是:如果制图区域是一个<div>容器,容器的尺寸将与调整大小酒吧改变.我使用以下代码来调整窗口大小.但它不适用于移动的调整大小栏.
$(window).resize(function () {
setTimeout(function () {
createChart(chartData);
}, 300);
});
Run Code Online (Sandbox Code Playgroud)
注意:网格组件在任何情况下都能正常工作,只是图表我总是遇到麻烦.我正在使用HighCharts,kendoUI网格,它们都在jQueryUI portlet中呈现.
任何评论赞赏!这个问题花了我很长时间..
更新:由于我认为我对该问题的解释不够清楚,我添加了JSFiddle示例以便更好地理解.基本上我想要两件事:1.当窗口调整大小时,重新调整图表的大小以适合其容器; 2.当调整大小条移动时,重新调整图表的大小以适合其容器.
我在本例中使用插件highcharts进行图表处理,jQuery UI Layout用于布局管理.对于我正在使用的其他一些插件,请参考这里,我不确定他们是否有冲突.
谢谢!