多个径向进度图表（js）

Question

我试图重新创建并更新此fiddle。我能够创建一个单独的图表，但无法实现第二个进度。

第二图表

<div id="radial-progress-vha"> 
      <div class="circle-vha"> 
      <div class="mask-vha full-vha"> 
      <div class="fill-vha"></div> 
      </div> 
      <div class="mask-vha half-vha"> 
      <div class="fill-vha"></div> 
      <div class="fill-vha fix-vha"></div> 
      </div> 
      <div class="shadow-vha"></div> 
      </div> 
      <div class="inset-vha"> 
      <div class="percentage-vha">22.17</div> 
      </div> 
     </div> 

我理解的是每个图形应该是唯一的，因此我复制具有不同名称的原始的CSS。这是where它分崩离析。

JS的

var transform_styles = ['-webkit-transform', '-ms-transform', 'transform']; 
window.randomize = function() { 
var rotation = Math.floor((180)*.123); 
var fix_rotation = rotation; 
for(i in transform_styles) { 
    $('.circle .fill, .circle .mask.full').css(transform_styles[i],'rotate(' + rotation + 'deg)'); 
//$('.circle .mask.left').css(transform_styles[i], 'rotate(' + rotation + 'deg)'); 
$('.circle .fill.fix').css(transform_styles[i],'rotate(' + fix_rotation + 'deg)'); 
} 
} 
setTimeout(window.randomize, 200); 
$('#radial-progress-vha'); 

Answer 1

我有一个工作小提琴：http://jsfiddle.net/uouxcLbd/

你的主要问题是

• 你没有需要复制的transform-styles
定义
• 该$('#radial-progress-va');和$('#radial-progress-vha');线是不必要的
• 的window.randomize第二个定义需要一个不同的名称
• 使用你的CSS类与-vha后缀
• 你做的CSS一个错字需要第二randomize功能 - 它缺少单个.所以.fill-vha选择器没有工作