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

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

解决方案：

<!DOCTYPEhtml><htmllang='en'><head><metacharset='UTF-8'><title>ichartjsdesigner</title><scriptsrc='http://www.ichartjs.com/ichart.latest.min.js'></script><scriptsrc="js/jquery-2.1.1.min.js"></script><scripttype="text/javascript">varevt="onorientationchange"inwindow?"orientationchange":"resize";window.addEventListener(evt,function(){console.log(evt);varwidth=document.documentElement.clientWidth;varheight=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，否则来回旋转将导致布局错误varx=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><scripttype='text/javascript'>varw=document.documentElement.clientWidth;varh=document.documentElement.clientHeight;vardiameter=Math.min(w,h);//这里获得了手机屏幕的宽高后，为了旋转手机的时候导致界面不混乱，需要将显示的图表设置为宽高最小的正方形（取巧）console.log(diameter);$(function(){varchart=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><styletype="text/css">#ichart-render{position:absolute;top:20%;}</style></head><body><divid='ichart-render'></div></body></html>