chartx3d
Version:
Data Visualization Chart Library
101 lines (87 loc) • 3.31 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1, maximum-scale=1" />
<title>xChart demo -- 饼图</title>
<script type="text/javascript" src="../../lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../dist/chartx.js"></script>
<!-- codemirror -->
<script type="text/javascript" src="../../lib/codemirror/codemirror.js"></script>
<script type="text/javascript" src="../../lib/codemirror/active-line.js"></script>
<script type="text/javascript" src="../../lib/codemirror/javascript.js"></script>
<script type="text/javascript" src="../../lib/codemirror/matchbrackets.js"></script>
<link rel="stylesheet" href="../../lib/codemirror/codemirror.css">
<link rel="stylesheet" href="../../lib/codemirror/zenburn.css">
<link rel="stylesheet" href="../../lib/codemirror/docs.css">
<!-- codemirror end -->
<!--bootstrap-->
<script type="text/javascript" src="../../lib/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="../../lib/bootstrap/css/docs.min.css">
<link rel="stylesheet" href="../../lib/bootstrap/css/bootstrap.min.css">
<!--bootstrap end-->
<script type="text/javascript" src="../../lib/demo.js"></script>
<link rel="stylesheet" href="../../lib/demo.css">
</head>
<body >
<table>
<tr>
<td id="td-vl">
<form><textarea id="code" name="code">
//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组
var data= [
["browser" , "value", "r" , "city"],
["ie" , 320 , 122 , "杭州"],
["firefox", 213 , 132 , "杭州"],
["safari" , 52 , 321 , "杭州"],
["chrome" , 62 , 192 , "杭州"],
["其他" , 70 , 382 , "杭州"],
["uc" , 90 , 232 , "北京"],
["百度" , 200 , 321 , "北京"],
["腾讯" , 80 , 89 , "北京"]
];
var options = {
coord : {
type : "polar3d"
},
graphs : [
{
type : "pie",
field : "value",
groupField: "browser",
maxHeight:300,
heightSort:"asc",
node:{
height:"r"
}
}
],
tips : {
content : function(info){
var node = info.nodes[0];
return node.label+"："+node.percentage+"%"
}
}
};
window.chart = Chartx3d.create("canvasTest" , data , options);
</textarea></form>
</td>
<td style="padding:0 10px;" id="td-vr">
<div id="chartdemo-r">
<div class="bs-callout bs-callout-warning" style="margin-top:10px;" id="callout-navs-anchor-disabled">
<span id="run" class="glyphicon glyphicon-play-circle" title="run"></span>
<h4>饼图（pie chart）- 基础饼图</h4>
<p>
联系人：@不决
</p>
</div>
<div class="test-c">
<div id="canvasTest" style='width:100%;height:600px;position:relative;'></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>