首页 > 代码库 > H5跨平台开发app之横竖屏导致的图表混乱问题
H5跨平台开发app之横竖屏导致的图表混乱问题
在跨平台开发中，犹豫使用的是非原生开发语言，会导致很多不方便的地方，最近公司做一个统计图表的东西，如果用原生开发的话比较容易控制图表显示时手机屏幕的方向，在跨平台开发中比较麻烦，
如果用户打开了手机屏幕自动旋转，有可能导致图表显示的错误。
解决方案：
<!DOCTYPE html>
<html lang=‘en‘>
<head>
<meta charset=‘UTF-8‘>
<title>ichartjs designer</title>
<script src=http://www.mamicode.com/‘http://www.ichartjs.com/ichart.latest.min.js‘></script>"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之横竖屏导致的图表混乱问题
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。