Javascript g、 拉斐尔:如何设置条形图高度的动画?

Javascript g、 拉斐尔:如何设置条形图高度的动画?,javascript,jquery,svg,raphael,graphael,Javascript,Jquery,Svg,Raphael,Graphael,是否有任何选项可将条形图作为动画从0增加到 bar.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, svgWi

是否有任何选项可将
条形图作为动画从
0
增加到

bar.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);

最后将
barchart()
更改为
rect()

这是我的解决办法

如果有人找到解决方案,请发布答案:)

// 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));