【已解决】Highcharts 在fineuimvc中使用缩放问题

Firefly1513

求助：
FineUImvc在使用highcharts的时候，放在panel的content里面，这个highcharts在panel缩放的时候不能跟着缩放，有什么好的办法吗？
注：放在html里面能正常缩放，也就是说只要放在F包含的代码里面就不可以正常缩放，在Panel的ContentEX属性中也不行。

sanshi

请基于空项目重现问题，并上传（包含“放在html里面能正常缩放”的代码）

sanshi

请基于空项目重现问题，并上传（包含“放在html里面能正常缩放”的代码）

Firefly1513

请三十老大帮忙看下，谢谢了。

Firefly1513

sanshi 发表于 2017-6-30 11:46
请基于空项目重现问题，并上传（包含“放在html里面能正常缩放”的代码）

还有个奇怪的事情，在Panel上加了.IsViewPort(true)  这个属性后，调整window  ，
第一次highchart 不会变化宽度，第二次变化的是第一次调整的宽度

sanshi

Firefly1513 发表于 2017-6-30 12:17
请三十老大帮忙看下，谢谢了。

如果把 highcharts 放到一个Panel中，改变窗体大小时，Panel的宽度是不会改变的，自然里面的图表也不会变化。

我稍微调整了一下：

1. @(F.Panel()
   
2.         .Height(200)
   
3.         .Content("<div style='height: 200px' id='container2'></div>")
   
4.         .IsViewPort(true)
   
5.         .ShowHeader(true)
   
6.         .Title("Panel1")
   
7.         .Listener("resize", "onPanel1Resize")
   
8.     )

复制代码

这里设置面板自适应窗体，才能在窗体大小改变时更新面板的大小，然后注册 resize 事件：

1. function onPanel1Resize() {
   
2.             $('#container2').highcharts().reflow();
   
3.         }
   

复制代码

在 resize 事件中，调用图表的重绘功能 reflow() 即可。

capfhz

我只会用百度的图表

Firefly1513

sanshi 发表于 2017-7-2 17:10
如果把 highcharts 放到一个Panel中，改变窗体大小时，Panel的宽度是不会改变的，自然里面的图表也不会变 ...

搞定了，谢谢老大，不过还有一点经验说一下，一开始按照老大的代码试了一下，竟然没有成功。
后来发现因为我放在嵌套的panel里面，isviewpost属性的panel在最外层，所以当大小变动的时候，内层的panel实际上是没有变动的，只能放在上一级或者上上一级的panel中（也就是实际有大小变化的panel中响应这个resize事件）

sanshi

Firefly1513 发表于 2017-7-6 10:17
搞定了，谢谢老大，不过还有一点经验说一下，一开始按照老大的代码试了一下，竟然没有成功。
后来发现因 ...

Panel嵌套也没关系，只要用合适的布局（HBox或者VBox），窗体改变时，内层的Panel大小也会跟着改变。

http://fineui.com/demo_pro/#/demo_pro/layout/vbox.aspx