Bar Graph Ext JS
Enviado por evanfa • 1 de Noviembre de 2012 • 611 Palabras (3 Páginas) • 329 Visitas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Drawing an animated vector bar graph.</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script src="http://code.createjs.com/easeljs-0.4.1.min.js"></script>
<script>
var canvas;
var stage;
var barPadding = 7;
var barHeight;
var maxValue = 50;
var count;
var barValues = [];
var bars = [];
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new Stage(canvas);
// generate some random data (between 4 and 10, the |0 floors (for positive numbers))
var numBars = Math.random()*6+4|0;
var max = 0;
for (var i=0; i<numBars; i++) {
var val = Math.random()*maxValue+1|0;
if (val > max) { max = val; }
barValues.push(val);
}
// calculate the bar width and height based on number of bars and width of canvas:
var barWidth = (canvas.width-150-(numBars-1)*barPadding)/numBars;
barHeight = canvas.height-150;
// create a shape to draw the background into:
var bg = new Shape();
stage.addChild(bg);
// draw the "shelf" at the bottom of the graph:
// note how the drawing instructions can be chained together.
bg.graphics.beginStroke("#444")
.moveTo(40, canvas.height-69.5)
.lineTo(canvas.width-70, canvas.height-69.5)
.endStroke()
.beginFill("#222")
.moveTo(canvas.width-70, canvas.height-70)
.lineTo(canvas.width-60, canvas.height-80)
.lineTo(50, canvas.height-80)
.lineTo(40, canvas.height-70)
.closePath();
// draw the horizontal lines in the background:
for (i=0; i<9; i++) {
bg.graphics.beginStroke(i%2 ? "#333" : "#444")
.moveTo(50,(canvas.height-80-i/8*barHeight|0)+0.5)
.lineTo(canvas.width-60,(canvas.height-80-i/8*barHeight|0)+0.5);
}
// add the graph title:
label = new Text("Bar Graph Example", "bold 30px Arial", "#FFF");
label.textAlign = "center";
label.x = canvas.width/2;
label.y = 50;
stage.addChild(label);
// draw the bars:
for (i=0; i<numBars; i++) {
// each bar is assembled in it's own Container, to make them easier to work with:
var bar = new Container();
// this will determine the color of each bar, save as a property of the bar for use in drawBar:
var hue = bar.hue = i/numBars*360;
// draw the front panel of the bar, this will be scaled to the right size in drawBar:
var front = new Shape();
front.graphics.beginLinearGradientFill(
[Graphics.getHSL(hue,100,60,0.9),
Graphics.getHSL(hue,100,20,0.75)],
[0,1],
0,
-100,
barWidth,0).drawRect(0,-100,barWidth+1,
100);
// draw the top of the bar, this will be positioned vertically in drawBar:
var top = new Shape();
top.graphics.beginFill(Graphics.getHSL(hue,100,70,0.9))
.moveTo(10,-10)
.lineTo(10+barWidth,-10)
.lineTo(barWidth,0)
.lineTo(0,0)
.closePath();
...