chartx3d
Version:
Data Visualization Chart Library
268 lines (239 loc) • 9.91 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 -- heatmap</title>
<script type="text/javascript" src="../../lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../dist/chartx.js"></script>
<!-- <script type="text/javascript" src="//at.alicdn.com/chart/70_iife_2.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>
canvas {
border: gray 1px solid;
}
</style>
</head>
<body>
<table>
<tr>
<td id="td-vl">
<form><textarea id="code" name="code">
//构建数据
let creatives=['创意A创意A创意A创意A','创意B创意B创意B创意B创意B','创意C','创意D','创意E','创意F'];
let targets=['定向一定向一定向一定向一定向一定向一','定向二','定向三','定向四','定向五','定向六','定向七','定向八','定向九','定向十','定向十一'];
let resources=['PC购物链路','淘好物活动','首页猜你喜欢','购中猜你喜欢','购后猜你喜欢'];
let data= [];
computeData();
//为空的色块填充f5f5f6试试看
var options = {
coord : {
type : "cube",
xAxis : {
field : "target",
label:{
rotation:20,
maxLength:6
},
// dataSection:targets
},
yAxis :{
field : "creative",
label:{
//textAlign:"right",
//rotation:20,
//maxLength:4
},
// dataSection:creatives
},
zAxis:{
field : "resource",
label:{
//rotation:20,
//maxLength:6
},
//dataSection:resources
},
controls:{
alpha: 5, //绕X轴旋转
beta: 5, //绕Y轴旋转
gamma: 0 //绕Z轴旋转
}
},
graphs : [
{
type : "heatmap",
field:'score',
face:'front', //绘制在box的那个面上
colorScheme: "#0A2A91",
area:{
highColor:'#9254de'
}
},
{
type : "heatmap",
field:'score',
face:'top',
colorScheme: "#910044",
area:{
highColor:'#5278f8'
}
},
{
type : "heatmap",
field:'score',
face:'right',
colorScheme: "#33007A",
area:{
highColor:'#E05A99'
}
}
],
tips:{
content(e){
let str='<div style="padding:5px">'
str+='<div><span style="color:#333">质量分:</span><span style="margin-left:5px">'+e.data.score+'</span></div>';
str+='<div><span style="color:#333">创意:</span><span style="margin-left:5px">'+e.data.creative+'</span></div>';
str+='<div><span style="color:#333">定向:</span><span style="margin-left:5px">'+e.data.target+'</span></div>';
str+='<div><span style="color:#333">资源包:</span><span style="margin-left:5px">'+e.data.resource+'</span></div>';
str+="</div>"
return str;
}
},
// legend:{
// mode:'radio',
// data:[{
// color:'#385ACC',
// name:'创意-定向',
// face:'front',
// enabled:true
// },{
// color:'#CC377C',
// name:'创意-资源包',
// face:'right',
// enabled:false
// },{
// color:'#FA7836',
// name:'资源包-定向',
// face:'top',
// enabled:false
// }]
// }
};
window.heatmap = Chartx3d.create("canvasTest" , data , options)
function rotationCube(val){
if(val==1){
// heatmap.getCoord().fire({type:'toFront'});
heatmap.getCoord().rotationTo('front');
}
if(val==2){
//heatmap.getCoord().fire({type:'toRight'});
heatmap.getCoord().rotationTo('right');
}
if(val==3){
//heatmap.getCoord().fire({type:'toTop'});
heatmap.getCoord().rotationTo('top');
}
}
heatmap.getCoord().on('planeclick',(e)=>{
alert(JSON.stringify(e.data.rowData));
})
function computeData(){
data= [];
let cs = creatives.concat([]);
cs.length = Math.floor(Math.random()*creatives.length+1);
let ts = targets.concat([]);
ts.length = Math.floor(Math.random()*targets.length+1);
let rs = resources.concat([]);
rs.length = Math.floor(Math.random()*resources.length+1);
//（创意和定向）
cs.forEach(creative=>{
ts.forEach(target=>{
data.push({
creative,
target,
resource:'',
score:Math.floor(Math.random()*10)
})
})
});
//（创意和资源包）
cs.forEach(creative=>{
rs.forEach(resource=>{
data.push({
creative,
target:'',
resource,
score:Math.floor(Math.random()*10)
})
})
});
//（资源包和定向）
rs.forEach(resource=>{
ts.forEach(target=>{
data.push({
creative:'',
target,
resource,
score:Math.floor(Math.random()*10)
})
})
});
}
function resetData(){
computeData();
heatmap.resetData(data);
}
</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 style="margin:5px 0 15px 50px">
<label style="margin-right:10px">
<input type="radio" name='item' value="1" onchange="rotationCube(1)" checked>
创意-定向
</label>
<label style="margin-right:10px">
<input type="radio" name='item' value="2" onchange="rotationCube(2)">
创意-资源包
</label>
<label style="margin-right:10px">
<input type="radio" name='item' value="3" onchange="rotationCube(3)">
资源包-定向
</label>
<button class="btn btn-primary" onclick="resetData()">更新数据</button>
</div>
<div id="canvasTest" style='width:600px;height:400px;position:relative;'></div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>