chartx3d
Version:
Data Visualization Chart Library
118 lines (99 loc) • 3.76 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>
<table>
<tr>
<td id="td-vl">
<form><textarea id="code" name="code">
//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
//第一行是表头。
var data = [];
// Parametric curve
for (var t = 0; t < 25; t += 1) {
var x = (1 + 0.25 * Math.cos(75 * t)) * Math.cos(t);
var y = (1 + 0.25 * Math.cos(75 * t)) * Math.sin(t);
var z = t + 2.0 * Math.sin(75 * t);
data.push({x, y, z});
}
console.log(data.length);
var options = {
coord : {
type : "box",
xAxis : {
field : "x",
layoutType:"proportion",
dataSection:[-1.5,-1,-0.5,0,0.5,1,1.5]
},
yAxis:{
name : "z",
layoutType : "proportion",
dataSection : [-1.5,-1,-0.5,0,0.5,1,1.5]
},
zAxis:{
field: "y",
layoutType: "proportion",
dataSection: [-1.5,-1,-0.5,0,0.5,1,1.5]
}
},
graphs : [
{
type : "line",
field : "z",
yAxisName:"z",
line:{
smooth:false
},
area:{
enabled:false
},
icon:{
enabled:false
}
}
]
};
window.line = 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:600px;position:relative;'></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>