chartx3d
Version:
Data Visualization Chart Library
106 lines (89 loc) • 3.41 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= [
["name" , "value", "r" , "city"],
["ie" , 320 , 122 , "杭州"],
["firefox", 213 , 132 , "杭州"],
["safari" , 12 , 321 , "杭州"],
["chrome" , 12 , 192 , "杭州"],
["其他" , 10 , 382 , "杭州"],
["uc" , 10 , 232 , "北京"],
["百度" , 200 , 321 , "北京"],
["腾讯" , 80 , 89 , "北京"]
];
var options = {
coord: {
type: "polar3d"
},
graphs: [
{
type: "pie",
startAngle: -90,
sort: "asc",
animation: true,
field: "value",
node:{
innerRadius:100,
},
label: {
enabled: true,
field: "name",
format: function ( val,data ){
var rowData = data.rowData;
return rowData.name+"："+rowData.value
}
}
}
]
}
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>