Mefistofel
04.04.2013, 13:08
Подскажите, пожалуйста, как анимировать данную диаграмму. Нужно, что бы столбики поднимались снизу вверх. Понимаю, что нужно поднимать значение высоты прямоугольника от нуля до "c" с помощью setInterval, но почему-то прокручивает очень быстро и просто выводит готовый результат.
http://learn.javascript.ru/play/fqnVR
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script type="application/x-javascript" language="javascript">
var userDataD = {
'user': {
diagram1: {0: 20.1, 1: 9.1, 2: 13.8, 3: 11.9, 4: 13.2, 5: 7.21},
diagram2: {0: 34.5, 1: 19.2, 2: 26.8, 3: 17.1, 4: 16.2, 5: 16.8}
}
}
var colorsD = ['#9e508b', '#9aa14a'];
function drawDiagram() {
var canvas = document.getElementById('cdiagram');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var x0 = y0 = 50;
var width = canvas.width-100;
var height = canvas.height-80;
var stepY = Math.round(height / 40);
var stepX = Math.round(width / 6);
ctx.font = '9pt Arial, sans-serif';
ctx.fillText("justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim", width/2+38, 55);
ctx.fillText('justo, rhoncut', width/2+280, 70);
ctx.rotate( (Math.PI / 180) * 270);
ctx.fillText('Percentage (%)', -250, 25);
ctx.rotate((Math.PI / 180) * 90);
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(x0, y0);
ctx.lineTo(x0, height + y0); // Ось У
ctx.lineTo(width + x0, height + y0); //Ось Х
ctx.moveTo(x0+10, y0-10);
ctx.lineTo(x0+10, height + y0-10);
ctx.lineTo(width + x0+10, height + y0-10);
ctx.lineTo(width +x0+10, y0-10);
var m = 0;
for (var i = x0; m <= 6; i += stepX) { //значения координат Х
m++;
ctx.moveTo(i+10, height + y0-10);
ctx.lineTo(i, height + y0);
ctx.lineTo(i, height + y0 + 4);
ctx.font = '12px sans-serif';
ctx.fillText('Period ' + m, i+stepX/2-3, height + y0 + 15);
}
var n = 50;
for (var j = y0; n > 1; j += stepY*10) { //значения координат У
n -=10;
ctx.moveTo(x0+10, j-10);
ctx.lineTo(width + x0+10, j-10);
ctx.moveTo(x0+10, j-10);
ctx.lineTo(x0, j);
ctx.lineTo(x0 - 4, j);
ctx.fillText(n, x0-20, j+3);
}
ctx.stroke();
ctx.closePath();
var lineNumber = -1;
ctx.lineWidth = 2;
for (var user in userDataD) {
for (var type in userDataD[user]) {
lineNumber++;
ctx.strokeStyle = colorsD[lineNumber];
if (lineNumber > colorsD.length) lineNumber = 0;
x0+=35;
for (var m in userDataD[user][type]) {
var count = userDataD[user][type][m];
var x = x0 + (m * stepX);
var y = y0 + (height-count * stepY);
var c = count*8;
ctx.strokeRect (x-15, height+y0, 30, -c);
var gradient = ctx.createLinearGradient(x, height+y0, x, y);
gradient.addColorStop(0, colorsD[lineNumber]);
gradient.addColorStop(1, '#fff');
ctx.fillStyle = gradient;
ctx.fillRect (x-15, height+y0, 30, -c);
ctx.fillStyle = 'black';
ctx.fillText (count, x-10, y-20);
if (x0 == 85)ctx.fillText ('*', x, y-5);
}
}
}
}
}
</script>
</head><body onload="drawDiagram()">
<canvas id="cdiagram" width="724" height="400">No Canvas</canvas>
</body>
</html>
http://learn.javascript.ru/play/fqnVR
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>
<script type="application/x-javascript" language="javascript">
var userDataD = {
'user': {
diagram1: {0: 20.1, 1: 9.1, 2: 13.8, 3: 11.9, 4: 13.2, 5: 7.21},
diagram2: {0: 34.5, 1: 19.2, 2: 26.8, 3: 17.1, 4: 16.2, 5: 16.8}
}
}
var colorsD = ['#9e508b', '#9aa14a'];
function drawDiagram() {
var canvas = document.getElementById('cdiagram');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
var x0 = y0 = 50;
var width = canvas.width-100;
var height = canvas.height-80;
var stepY = Math.round(height / 40);
var stepX = Math.round(width / 6);
ctx.font = '9pt Arial, sans-serif';
ctx.fillText("justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim", width/2+38, 55);
ctx.fillText('justo, rhoncut', width/2+280, 70);
ctx.rotate( (Math.PI / 180) * 270);
ctx.fillText('Percentage (%)', -250, 25);
ctx.rotate((Math.PI / 180) * 90);
ctx.beginPath();
ctx.strokeStyle = '#000';
ctx.moveTo(x0, y0);
ctx.lineTo(x0, height + y0); // Ось У
ctx.lineTo(width + x0, height + y0); //Ось Х
ctx.moveTo(x0+10, y0-10);
ctx.lineTo(x0+10, height + y0-10);
ctx.lineTo(width + x0+10, height + y0-10);
ctx.lineTo(width +x0+10, y0-10);
var m = 0;
for (var i = x0; m <= 6; i += stepX) { //значения координат Х
m++;
ctx.moveTo(i+10, height + y0-10);
ctx.lineTo(i, height + y0);
ctx.lineTo(i, height + y0 + 4);
ctx.font = '12px sans-serif';
ctx.fillText('Period ' + m, i+stepX/2-3, height + y0 + 15);
}
var n = 50;
for (var j = y0; n > 1; j += stepY*10) { //значения координат У
n -=10;
ctx.moveTo(x0+10, j-10);
ctx.lineTo(width + x0+10, j-10);
ctx.moveTo(x0+10, j-10);
ctx.lineTo(x0, j);
ctx.lineTo(x0 - 4, j);
ctx.fillText(n, x0-20, j+3);
}
ctx.stroke();
ctx.closePath();
var lineNumber = -1;
ctx.lineWidth = 2;
for (var user in userDataD) {
for (var type in userDataD[user]) {
lineNumber++;
ctx.strokeStyle = colorsD[lineNumber];
if (lineNumber > colorsD.length) lineNumber = 0;
x0+=35;
for (var m in userDataD[user][type]) {
var count = userDataD[user][type][m];
var x = x0 + (m * stepX);
var y = y0 + (height-count * stepY);
var c = count*8;
ctx.strokeRect (x-15, height+y0, 30, -c);
var gradient = ctx.createLinearGradient(x, height+y0, x, y);
gradient.addColorStop(0, colorsD[lineNumber]);
gradient.addColorStop(1, '#fff');
ctx.fillStyle = gradient;
ctx.fillRect (x-15, height+y0, 30, -c);
ctx.fillStyle = 'black';
ctx.fillText (count, x-10, y-20);
if (x0 == 85)ctx.fillText ('*', x, y-5);
}
}
}
}
}
</script>
</head><body onload="drawDiagram()">
<canvas id="cdiagram" width="724" height="400">No Canvas</canvas>
</body>
</html>