FineUI 官方论坛

标题: 【已解决】Highcharts 在fineuimvc中使用缩放问题 [打印本页]

作者: Firefly1513 时间: 2017-6-30 11:40
标题: 【已解决】Highcharts 在fineuimvc中使用缩放问题
求助：
FineUImvc在使用highcharts的时候，放在panel的content里面，这个highcharts在panel缩放的时候不能跟着缩放，有什么好的办法吗？
注：放在html里面能正常缩放，也就是说只要放在F包含的代码里面就不可以正常缩放，在Panel的ContentEX属性中也不行。
[attach]10322[/attach]

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

作者: Firefly1513 时间: 2017-6-30 12:17
[attach]10323[/attach]
[attach]10324[/attach]
[attach]10325[/attach]
[attach]10326[/attach]
[attach]10327[/attach]

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

作者: Firefly1513 时间: 2017-6-30 12:28

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

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

作者: sanshi 时间: 2017-7-2 17:10

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

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

我稍微调整了一下：

@(F.Panel()
.Height(200)
.Content("<div style='height: 200px' id='container2'></div>")
.IsViewPort(true)
.ShowHeader(true)
.Title("Panel1")
.Listener("resize", "onPanel1Resize")
)

复制代码

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

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

复制代码

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

[attach]10331[/attach]

作者: capfhz 时间: 2017-7-3 14:26
我只会用百度的图表

作者: Firefly1513 时间: 2017-7-6 10:17

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

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

作者: sanshi 时间: 2017-7-6 12:55

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

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

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

欢迎光临 FineUI 官方论坛 (https://fineui.com/bbs/)