chartx3d
Version:
Data Visualization Chart Library
149 lines (128 loc) • 6.44 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 -- bar</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>
<!-- <div id="testdiv" style="background:red;width:20px;height:20px;position:absolute;z-index: 100000;">test</div> -->
<table>
<tr>
<td id="td-vl">
<form><textarea id="code" name="code">
//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
//第一行是表头。
var data= [
["xfield","uv" ,"pv" ,"click", "ppc","ppd"],
[ 1 , 101 , 20 , 33 , 45, 33],
[ 2 , 67 , 51 , 26 , 76,54],
[ 3 , 130 , 50 , 50 , 45,98],
[ 4 , 101 , 60 , 33 , 64,355],
[ 5 , 67 , 91 , 126 , 22,56 ],
[ 6 , 30 , 50 , 90 , 45,98],
[ 7 , 51 , 120 , 33 , 78,235],
[ 8 , 67 , 51 , 86 , 234,123],
[ 9 , 120 , 90 , 150 , 63, 234]
];
var options = {
//theme : [],
coord : {
type : "box",
xAxis : {
field : "xfield",
title : {
content : "xAxis"
},
label : {
textAlign : "center",
format: function(val){
return val;
//return "x\nodfdfdfdfsdfo"
}
}
//dataSection : [1,3,5,7,9]
},
controls:{
autoRotate:false,
boxWidth:1500, //空间中X的最大值(最大宽度)
boxHeight:1000, //空间中Y的最大值(最大高度)
boxDepth:500, //空间中Z的最大值(最大深度)
distance:900, //默认相机距离
maxDistance:5000, //最大相机距离
minDistance:300, //最小相机距离
alpha:20, //绕X轴旋转
beta:40, //绕Y轴旋转
}
},
tips : {
enabled : "true"
},
graphs : [
{
type : "bar",
field : ["ppc" ],
node:{
shapeType:'cone', //cube cylinder cone
// materialType:'phong' //phong lambert base
}
},
{
type : "bar",
field : ["uv",["click","pv"] ],
yAxisAlign : "left",
node:{
shapeType:'cylinder', //cube cylinder cone
// materialType:'phong' //phong lambert base
}
},
{
type : "bar",
field : ["ppd" ],
node:{
shapeType:'cube', //cube cylinder cone
// materialType:'phong' //phong lambert base
}
}
]
};
window.bar = 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>柱状图（bar chart）</h4>
<p>
联系人：@不决
</p>
</div>
<div class="test-c">
<div id="canvasTest" style='width:100%;height:400px;position:relative;'></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>