chartx3d
Version:
Data Visualization Chart Library
143 lines (120 loc) • 4.74 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">
<style type="text/css">
canvas{
border:1px solid red;
}
</style>
</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",
allAngles: 300,
field : "value",
groupField: "name",
//饼图的起始角度[有效值范围0-360度，默认值0度
//饼图的绘制是从起始角度开始，顺时针绘制，参考饼图的绘制动画.
startAngle:-180,
//数据排序，默认按用户给定顺序[desc/asc]
sort: 'desc',
//是否允许动画
//animation: true,
//周边tip
label : {
enabled: true,
//是否绘制连接线(注意：此配置仅限于扇形块比较分散，若扇形比较紧密时，无连线会导致识别混淆)
//allowLine:false,
//format : function( name, data ){
// var rowData = data.rowData;
// return "<div><span>"+name+"</span>：<span>"+rowData.value+"（"+ data.percentage +"%）</span></div>"
//}
},
node : {
// radius : 30,
//r : "r", //如果是丁格尔玫瑰，就有半径的Field
select : {
enabled : true
},
onclick : function( e , nodeData ){
if( !nodeData.selected ){
this.selectAt( nodeData.iNode );
} else {
this.unselectAt( nodeData.iNode );
};
}
}
}
],
tips : {
content : function(info){
var node = info.nodes[0];
return node.label+"："+node.percentage+"%"
}
},
legend: {}
};
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>