chartx3d
Version:
Data Visualization Chart Library
327 lines (282 loc) • 9.73 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>
<script type="text/javascript" src="./pixelmatch.js"></script>
<style>
html,
body {
width: 100%;
}
</style>
</head>
<body>
<button onclick="run()">运行</button>
<button onclick="destroy()">销毁</button>
<button onclick="reset()">reset</button>
<button onclick="test()">test</button>
<div style="width:100%;clear:both">
<div class="test-c" style="float:left;width:500px;">
<div id="canvasTest" style='width:100%;height:600px;position:relative;'></div>
</div>
<div class="test-c" style="float:right;width:500px">
<div id="canvasTest2" style='width:100%;height:600px;position:relative;'></div>
</div>
</div>
</body>
</html>
<script>
var data = [
["xfield", "uv", "pv", "click", "ppc"],
[1, 40, 20, 33, 45],
[2, 60, 51, 26, 76],
[3, 80, 50, 50, 45],
[4, 100, 60, 33, 64],
[5, 120, 91, 126, 22],
[6, 20, 50, 90, 45],
[7, 20, 120, 33, 78],
[8, 20, 51, 86, 234],
[9, 20, 90, 150, 63]
];
var data1 = [
["xfield", "uv", "pv", "click", "ppc"],
[1, 140, 230, 353, 455],
[2, 260, 1541, 256, 76],
[3, 820, 50, 510, 45],
[4, 1200, 650, 33, 164],
[5, 120, 91, 126, 22]
];
var options = {
tips: {
enabled: true
},
coord: {
type: "box",
xAxis: {
field: "xfield",
title: {
content: "xAxis"
},
label: {
textAlign: "center",
format: function (val) {
return val;
// return val%2==0? "x\nodfdfdfdfsdfo":val;
}
}
//dataSection : [1,3,5,7,9]
},
zAxis: {
// enabled: false,
// field : "ppc",
//depth: 1000,
title: {
content: "zAxis"
},
label: {
textAlign: "left",
format: function (val) {
return val;
//return "x\nodfdfdfdfsdfo"
}
},
// dataSection: ['页面访问数']
},
yAxis: [
{
// min:0,
name: 'uv',
title: {
content: "left"
},
// dataSection : [0,100,200,300,400,500,600,700,800],
label: {
//textAlign: 'left',
format: function (val) {
// return val%3==0? "测试文本对齐":val;
}
}
}
],
controls: {
boxWidth: 1500, //空间中X的最大值(最大宽度)
boxHeight: 1000, //空间中Y的最大值(最大高度)
boxDepth: 500, //空间中Z的最大值(最大深度)
distance: 900, //默认相机距离
maxDistance: 5000, //最大相机距离
minDistance: 300, //最小相机距离
alpha: 20, //绕X轴旋转
beta: 40, //绕Y轴旋转
}
},
tips: {
//pointer : "region"
},
graphs: [
{
type: "bar",
field: [['uv', 'click']],
yAxisName: 'uv',
label: {
enabled: true,
verticalAlign: "middle",
position: "center",
fontColor: "#fff",
lineWidth: 2,
rotation: -90
}
},
{
type: "bar",
field: ['pv'],
yAxisName: 'uv',
label: {
enabled: true,
verticalAlign: "middle",
position: "center",
fontColor: "#fff",
lineWidth: 2,
rotation: -90
}
}
]
};
var options2 = {
tips: {
enabled: true
},
coord: {
type: "box",
xAxis: {
field: "xfield",
title: {
content: "xAxis"
},
label: {
textAlign: "center",
format: function (val) {
return val+'';
// return val%2==0? "x\nodfdfdfdfsdfo":val;
}
}
//dataSection : [1,3,5,7,9]
},
zAxis: {
// enabled: false,
// field : "ppc",
//depth: 1000,
title: {
content: "zAxis"
},
label: {
textAlign: "left",
format: function (val) {
return val;
//return "x\nodfdfdfdfsdfo"
}
},
// dataSection: ['页面访问数']
},
yAxis: [
{
// min:0,
name: 'uv',
title: {
content: "left"
},
// dataSection : [0,100,200,300,400,500,600,700,800],
label: {
//textAlign: 'left',
format: function (val) {
// return val%3==0? "测试文本对齐":val;
}
}
}
],
controls: {
boxWidth: 1500, //空间中X的最大值(最大宽度)
boxHeight: 1000, //空间中Y的最大值(最大高度)
boxDepth: 500, //空间中Z的最大值(最大深度)
distance: 900, //默认相机距离
maxDistance: 5000, //最大相机距离
minDistance: 300, //最小相机距离
alpha: 20, //绕X轴旋转
beta: 40, //绕Y轴旋转
}
},
tips: {
//pointer : "region"
},
graphs: [
{
type: "line",
field: [['uv', 'click']],
yAxisName: 'uv',
label: {
enabled: true,
verticalAlign: "middle",
position: "center",
fontColor: "#fff",
lineWidth: 2,
rotation: -90
}
},
{
type: "line",
field: ['pv'],
yAxisName: 'uv',
label: {
enabled: true,
verticalAlign: "middle",
position: "center",
fontColor: "#fff",
lineWidth: 2,
rotation: -90
}
}
]
};
let run = function () {
//chart的数据格式，xChart中所有的图表数据格式都是这样的二维数组，
//第一行是表头。
window.bar = Chartx3d.create("canvasTest", data, options)
window.line = Chartx3d.create("canvasTest2", data, options2)
}
run();
function destroy() {
bar.destroy();
line.destroy();
}
function reset() {
bar.resetData(data1);
line.resetData(data1);
}
function test() {
let width = bar.canvasDom.width;
let height = bar.canvasDom.height;
let diffCtx = document.createElement('canvas').getContext('2d');
let gl = bar.renderer.gl;
let gl2 = line.renderer.gl;
// var img1 = barCtx.getImageData(0, 0, width, height),
// img2 = lineCtx.getImageData(0, 0, width, height),
diff = diffCtx.createImageData(width, height);
diffCtx.canvas.width = 500;
diffCtx.canvas.height = 600;
diffCtx.canvas.style.cssText=" transform: rotateX(180deg);"
var pixels = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
//console.log(pixels);
var pixels2 = new Uint8Array(gl2.drawingBufferWidth * gl2.drawingBufferHeight * 4);
gl2.readPixels(0, 0, gl2.drawingBufferWidth, gl2.drawingBufferHeight, gl2.RGBA, gl2.UNSIGNED_BYTE, pixels2);
let diffcount = pixelmatch(pixels, pixels2, diff.data, width, height, { threshold: 0.1 });
console.log(diffcount);
if(diffcount>0){
diffCtx.putImageData(diff, 0, 0);
document.body.appendChild(diffCtx.canvas);
}
}
</script>