溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在跨平臺開發中，猶豫使用的是非原生開發語言，會導致很多不方便的地方，最近公司做一個統計圖表的東西，如果用原生開發的話比較容易控制圖表顯示時手機屏幕的方向，在跨平臺開發中比較麻煩，
如果用戶打開了手機屏幕自動旋轉，有可能導致圖表顯示的錯誤。
解決方案：
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>ichartjs designer</title>
<script src='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>免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
