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

落花踏尽游何处，笑入胡姬酒肆中。这篇文章主要讲述H5跨平台开发app之横竖屏导致的图表混乱问题相关的知识，希望能为你提供帮助。
在跨平台开发中，犹豫使用的是非原生开发语言，会导致很多不方便的地方，最近公司做一个统计图表的东西，如果用原生开发的话比较容易控制图表显示时手机屏幕的方向，在跨平台开发中比较麻烦，
如果用户打开了手机屏幕自动旋转，有可能导致图表显示的错误。
【H5跨平台开发app之横竖屏导致的图表混乱问题】解决方案：

< !DOCTYPE html> < html lang=‘en‘> < head> < meta charset=‘UTF-8‘> < title> ichartjs designer< /title> < script src=https://www.songbingjia.com/android/‘http://www.ichartjs.com/ichart.latest.min.js‘> < /script> < script src="js/jquery-2.1.1.min.js"> < /script> < script type="text/javascript"> var evt = "onorientationchange" in window ? "orientationchange" : "resize"; window.addEventListener(evt, function() { console.log(evt); var width = document.documentElement.clientWidth; var height = document.documentElement.clientHeight; $print = $(‘#ichart-render‘); if(width > height) { $print.width(width); $print.height(height); $print.css(‘top‘, 0); $print.css(‘left‘, 0); $print.css(‘transform‘, ‘none‘); $print.css(‘transform-origin‘, ‘50% 50%‘); //这里取得了图表显示控件后要对其进行设置CSS，否则来回旋转将导致布局错误 var x = document.getElementById("ichart-render"); x.style.position = "absolute"; x.style.top = "20%"; } else { $print.width(height); $print.height(width); $print.css(‘top‘, 0); $print.css(‘left‘, 0); $print.css(‘transform‘, ‘none‘); $print.css(‘transform-origin‘, ‘50% 50%‘); } }, false); < /script> < script type=‘text/javascript‘> var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var diameter = Math.min(w, h); //这里获得了手机屏幕的宽高后，为了旋转手机的时候导致界面不混乱，需要将显示的图表设置为宽高最小的正方形（取巧） console.log(diameter); $(function() { var chart = iChart.create({ render: "ichart-render", width: w, height: w, background_color: "#fefefe", gradient: false, color_factor: 0.2, border: { color: "BCBCBC", width: 1 }, align: "center", offsetx: 0, offsety: 0, sub_option: { border: { color: "#BCBCBC", width: 1 }, label: { fontweight: 500, fontsize: 11, color: "#4572a7", sign: "square", sign_size: 12, border: { color: "#BCBCBC", width: 1 }, background_color: "#fefefe" } }, shadow: true, shadow_color: "#666666", shadow_blur: 2, showpercent: false, column_width: "70%", bar_height: "70%", radius: "90%", title: { text: "利用ichartjs制作漂亮图表", color: "#111111", fontsize: 20, font: "微软雅黑", textAlign: "center", height: 30, offsetx: 0, offsety: 0 }, subtitle: { text: "", color: "#111111", fontsize: 16, font: "微软雅黑", textAlign: "center", height: 20, offsetx: 0, offsety: 0 }, footnote: { text: "", color: "#111111", fontsize: 12, font: "微软雅黑", textAlign: "right", height: 20, offsetx: 0, offsety: 0 }, legend: { enable: false, background_color: "#fefefe", color: "#333333", fontsize: 12, border: { color: "#BCBCBC", width: 1 }, column: 1, align: "right", valign: "center", offsetx: 0, offsety: 0 }, coordinate: { width: "80%", height: "84%", background_color: "#ffffff", axis: { color: "#a5acb8", width: [1, "", 1, ""] }, grid_color: "#d9d9d9", label: { fontweight: 500, color: "#666666", fontsize: 11 } }, label: { fontweight: 500, color: "#666666", fontsize: 11 }, type: "pie2d", data: [{ name: "名称A", value: 20, color: "#4572a7" }, { name: "名称B", value: 30, color: "#aa4643" }, { name: "名称C", value: 40, color: "#89a54e" }, { name: "新增", value: 10, color: "#4572a7" }] }); chart.draw(); }); < /script> < style type="text/css"> #ichart-render { position: absolute; top: 20%; } < /style> < /head> < body > < div id=‘ichart-render‘> < /div> < /body> < /html>

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

推荐阅读

单机的经营游戏，单机经营游戏推荐

黑夜使者

淮北市第49周楼市成交数据来了，备案83套！

苏轼的轼组词轼出色组词

新买的毛衣怎么洗

面包冰箱里能放几天？解析面包在冰箱中的保鲜期

android android:duplicateParentState=&quot;true&quot; &quot;false&quot;

红烧鲳鱼怎么做好吃又简单红烧鲳鱼的家常做法简单窍门

做整鼻子痛吗

残差收敛多大视为有限元计算收敛（）

哪里能学做蛋糕？

迷你世界2月26日激活码迷你世界2022年2月26日礼包兑换码

骐达曲轴传感器位置图骐达曲轴传感器位置图解

高跟鞋后跟怎么换鞋钉高跟鞋后跟如何换鞋钉

小公司与大公司的Java程序员有什么差别（如何才能进大公司？）

苹果12怎么设置密码锁屏（苹果12密码锁屏设置）

怎么设置苹果主屏幕快捷键，苹果手机的主屏幕键怎么设置

大量微信群推广代发广告，哪里有代发群广告的工作室信誉一定要好的有过合作或者正在合作

丧假工资怎么发

痘疤痘坑要怎么修复