2013-05-17 43 views
0

是否有任何选项将bar chart作为动画从0增加到?g.raphael:如何动画条形图高度?

bars.animate({'stroke':"#FF0"},1000);这可以改变属性。其实我需要改变柱状图高度的价值,改变标签时增加,这并没有事先发现但:(

var svgWidth = 400; 
var svgHeight = 450; 
var r = Raphael('overview'); 
var barBorder = {stroke: '#000', 'stroke-width':1}; 
r.setViewBox(0, 0, svgWidth, svgHeight, false); 

r.setSize('100%', '100%'); 
var colors = [ "#999", "#B2B2B2", "#CCC"]; 
data4 = [[83], [72], [43]]; 
data2 = [[13], [22], [20]]; 

var bars = r.barchart(50, 20, 250, 150, data4, {colors: colors, 'gutter': '-1%'}).bars.attr(barBorder);//.hover(fin, fout); 

var unicorn = r.path("M350 150 H10 V10").attr({stroke: "#000","stroke-width": 1}); 

bars.animate({'stroke':"#FF0"},1000); 

DEMO

感谢

回答

1

终于改变barchart()rect()

这是我的解决方案http://jsfiddle.net/sweetmaanu/sqnXM/

// Create options object that specifies the rectangle 
var PatientBar1 = { width: 100,height: 200,x: 0,y: 0} 
var PatientBar2 = { width: 100,height: 180,x: 100,y: 20} 
var PatientBar3 = { width: 100,height: 120,x: 200,y: 80} 
var speed = 2000; 
// Create new raphael object 
var patient01 = new Raphael('patient02-mobile', 300, 300); 
/* 
* Create rectangle object with y-position at bottom by setting it to the specified height, 
* also give the rectangle a height of '0' to make it invisible before animation starts 
*/ 
var rect1 = patient01.rect(PatientBar1.x, PatientBar1.height, PatientBar1.width, 0).attr({fill: '#999', stroke:'#000'}); 
var rect2 = patient01.rect(PatientBar2.x, 200, PatientBar2.width, 0).attr({fill: '#B2B2B2', stroke:'#000'}); 
var rect3 = patient01.rect(PatientBar3.x, 200, PatientBar3.width, 0).attr({fill: '#CCC', stroke:'#000'}); 

/* 
* Animate the rectangle from bottom up by setting the height to the earlier specified 
* height and by setting the y-position to the top of the rectangle 
*/ 
var anim1 = rect1.animate({ 
    y:PatientBar1.y, 
    height:PatientBar1.height 
}, speed); 
var anim2 = Raphael.animation({ 
    y:PatientBar2.y, 
    height:PatientBar2.height 
}, speed); 
var anim3 = Raphael.animation({ 
    y:PatientBar3.y, 
    height:PatientBar3.height 
}, speed); 
rect2.animate(anim2.delay(2000)); 
rect3.animate(anim3.delay(4000)); 

请发帖回答如果有人找到解决办法:)