H5跨平台开发app之横竖屏导致的图表混乱问题

在跨平台开发中，犹豫使用的是非原生开发语言，会导致很多不方便的地方，最近公司做一个统计图表的东西，如果用原生开发的话比较容易控制图表显示时手机屏幕的方向，在跨平台开发中比较麻烦，

如果用户打开了手机屏幕自动旋转，有可能导致图表显示的错误。

解决方案：

在加载饼形图或者柱状图的时候，常常让手机横屏看起来效果比较好，但是会出现一个问题，比如用户设置了自动切换横竖屏幕，那么如果代码中不加以设置的话就会导致

图表显示错误。

1、强制横屏

2、根据测量手机屏幕的尺寸加以显示

强制横屏的话如果你先获取了手机屏幕的横竖屏幕尺寸，那么这个尺寸多半说错误的，只能说留在绘制饼图或者柱状图的时候，设置宽高的时候再获取尺寸。

代码如下：

width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight

我用的说ichar插件，这款插件比较方便。在输入图表尺寸的时候，用以上代码获取大小即可。