Javascript 动态更新Snap.svg仪表图

我在Codepen（credits:Henry Poydar）上找到了一些图表代码，它使用snap.svg创建动画仪表图表

angular.module（'app'，[]）；
角度。模块（'app'）
.controller（'metricsCtrl'，函数（$scope）{
$scope.percentage=.8；
var polar_to_cartesian，svg_circle_arc_path，动画_arc；
极坐标到笛卡尔坐标=函数（cx、cy、半径、角度）{
弧度；
弧度=（角度-90）*Math.PI/180.0；
返回[数学圆（（cx+（半径*数学余弦（弧度）））*100）/100，数学圆（（cy+（半径*数学余弦（弧度）））*100）/100]；
};
svg_圆_弧_路径=函数（x、y、半径、开始角度、结束角度）{
变量end_xy，start_xy；
起点xy=极坐标到笛卡尔坐标（x，y，半径，终点角度）；
end_xy=极坐标系到笛卡尔坐标系（x，y，半径，起始角）；
返回“M”+起始点xy[0]+“”+起始点xy[1]+“A”+半径+“”+半径+“0 0”+结束点xy[0]+“”+结束点xy[1]；
};
动画_弧=函数（比率、svg、perc）{
无功弧；
arc=svg.path（“”）；
返回快照。动画（0，比率，（函数（val））{
var路径；
arc.remove（）；
路径=svg_圆_弧_路径（500500450，-90，val*180.0-90）；
arc=svg.path（路径）；
arc.attr({
类别：“数据弧”
});
perc.text（数学四舍五入（val*100）+'%'）；
})，数学四舍五入（2000*比率），mina.easeinout）；
};
$scope.$watch（'percentage'，function（）{
$（'.metric'）。每个（函数（）{
var比率、svg、perc；
//比率=$（this）.data（'ratio'）；
比率=$scope.percentage；
svg=Snap（$（this.find（'svg'）[0]）；
perc=$（this.find（'text.percentage'）；
动画_弧（比率、svg、perc）；
});
});
});
.metric{
填充：10%；
}
.公制svg{
最大宽度：100%；
}
.度量路径{
笔画宽度：75；
行程：#ecf0f1；
填充：无；
}
.公制路径.data-arc{
行程：#3498db；
}
.公制文本{
填充：#3498db；
}

0%
空的
这是由于“svg.path（path）”每次都创建一个新的弧，因此减小值会绘制一个被先前弧隐藏的弧。解决方案是在每次重新绘制时删除上一个圆弧


angular.module（'app'，[]）；
角度。模块（'app'）
.controller（'metricsCtrl'，函数（$scope）{
$scope.percentage=.8；
var polar_to_cartesian，svg_circle_arc_path，动画_arc；
极坐标到笛卡尔坐标=函数（cx、cy、半径、角度）{
弧度；
弧度=（角度-90）*Math.PI/180.0；
返回[数学圆（（cx+（半径*数学余弦（弧度）））*100）/100，数学圆（（cy+（半径*数学余弦（弧度）））*100）/100]；
};
svg_圆_弧_路径=函数（x、y、半径、开始角度、结束角度）{
变量end_xy，start_xy；
起点xy=极坐标到笛卡尔坐标（x，y，半径，终点角度）；
end_xy=极坐标系到笛卡尔坐标系（x，y，半径，起始角）；
返回“M”+起始点xy[0]+“”+起始点xy[1]+“A”+半径+“”+半径+“0 0”+结束点xy[0]+“”+结束点xy[1]；
};
动画_弧=函数（比率、svg、perc）{
无功弧；
arc=svg.path（“”）；
返回快照。动画（0，比率，（函数（val））{
var路径；
arc.remove（）；
路径=svg_圆_弧_路径（500500450，-90，val*180.0-90）；
var previousArc=svg.select（“.data arc”）
if（前弧）{
previousArc.remove（）；//删除上一个圆弧
}
arc=svg.path（路径）；
arc.attr({
类别：“数据弧”
});
perc.text（数学四舍五入（val*100）+'%'）；
})，数学四舍五入（2000*比率），mina.easeinout）；
};
$scope.$watch（'percentage'，function（）{
$（'.metric'）。每个（函数（）{
var比率、svg、perc；
//比率=$（this）.data（'ratio'）；
比率=$scope.percentage；
svg=Snap（$（this.find（'svg'）[0]）；
perc=$（this.find（'text.percentage'）；
动画_弧（比率、svg、perc）；
});
});
});
.metric{
填充：10%；
}
.公制svg{
最大宽度：100%；
}
.度量路径{
笔画宽度：75；
行程：#ecf0f1；
填充：无；
}
.公制路径.data-arc{
行程：#3498db；
}
.公制文本{
填充：#3498db；
}

0%
空的