chartx3d
Version:
Data Visualization Chart Library
172 lines (152 loc) • 5.26 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 -- line</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 , 1 , 100 , 233 , 0.2],
[ 2 , 2 , 51 , 326 , 0.5],
[ 3 , 3 , 50 , 550 , 0.8],
[ 4 , 4 , 60 , 533 , 0.4],
[ 5 , 5 , 91 , 3126 , 0.22 ],
[ 6 , 6 , 50 , 290 , 0.35],
[ 7 , 6 , 96 , 233 , 0.91],
[ 8 , 7 , 51 , 386 , 0.1],
[ 9 , 8 , 90 , 150 , 0.34 ]
];
/*
var data = [
{ xfield : 1, uv: null, pv: undefined, click: null },
{ xfield : 2, uv: 0, pv: "", click: ""},
{ xfield : 3, uv: 23, pv: 145, click : undefined },
{ xfield : 4, uv : 232, pv: 32, click : 123 },
{ xfield : 5, uv : 232, pv: 123, click : 63 },
{ xfield : 6, uv : 43, pv: 213, click : 42 },
{ xfield : 7, uv : 23, pv: 152, click : 62 },
{ xfield : 8, uv : 122, pv: 53, click : 35 },
{ xfield : 9, uv : 23, pv: 45, click : 103 },
{ xfield : 10, uv : 64, pv: 75, click : 74 },
{ xfield : 11, uv : 212, pv: 74, click : 43 },
{ xfield : 12, uv : undefined, pv: 19, click : 7 }
]
*/
var options = {
coord : {
type : "box",
//横向的图表，是坐标系横向了
//horizontal : true,
xAxis : {
field : "xfield",
label:{
rotation : 30
}
},
yAxis : [
{
name : "pv",
middleweight:[8,100]
}
],
zAxis:{
dataSection:["点击率","点击,成交","页面访问数"]
},
controls:{
autoRotate:false
}
},
graphs : [
{
type : "line",
field : ["uv"] ,
yAxisName:"pv" ,
fill : {
alpha : [ 0.5 , 0 ]
},
node : {
//配置拐点才出现节点
corner : true
},
label : {
enabled : true
}
},{
type : "line",
field : ["pv"] ,
yAxisName:"pv" ,
fill : {
alpha : [ 0.5 , 0 ]
},
node : {
//配置拐点才出现节点
corner : true
},
label : {
enabled : true
}
},{
type : "line",
field : ["click"] ,
yAxisName:"pv" ,
fill : {
alpha : [ 0.5 , 0 ]
},
node : {
//配置拐点才出现节点
corner : true
},
label : {
enabled : true
}
}
]
};
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>