chartx3d
Version:
Data Visualization Chart Library
137 lines (117 loc) • 4.14 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 -- area</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= [
["xfield","uv" ,"pv" ,"click", "ppc"],
[ 1 , 101 , 300 , 33 , 0.2],
[ 2 , 67 , 51 , 26 , 0.5],
[ 3 , 130 , 50 , 50 , 0.8],
[ 4 , 101 , 60 , 33 , 0.4],
[ 5 , 67 , 91 , 126 , 0.22 ],
[ 6 , 30 , 50 , 90 , 0.35],
[ 7 , 51 , 120 , 33 , 0.91],
[ 8 , 67 , 51 , 86 , 0.1],
[ 9 , 120 , 90 , 150 , 0.34 ]
];
var options = {
coord : {
type : "box",
xAxis : {
field : "xfield"
},
zAxis:{
layoutType:'peak',
}
},
graphs : [
{
type : "area",
field : ["uv"]
},
{
type : "area",
field : ["pv"]
}
],
markpoint:[
{
markTo:'uv',
active:'max',
label:{
fillStyle:'red'
}
},
{
markTo:'uv',
active:'min',
label:{
fillStyle:'green'
}
},
{
markTo:'pv',
active:'max',
label:{
fillStyle:'red'
}
},
{
markTo:'pv',
active:'min',
label:{
fillStyle:'green'
}
}
]
};
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>