Ölçek SVG resmi kullanıyorum şu Raphael yapmaya çalışıyorum

Question

farklı durumlarda en üst ve değişim göstergesi rengini uyacak şekilde 2) farklı durumlarda manometereninkine rengini değiştirme ... Bu şimdiye kadar yaptığım ama çalışmıyor şudur:

archtype.customAttributes.counter = function (counter, top) { 
    var motto = ''; 
    switch(true) { 
    case(counter<=(top/10)): 
     motto = 'Very Poor !' 
     colour = '#BD2727'; //pretty sure this is wrong 
     break; 
    case(counter<=(5.61*top/10)): 
     motto = 'Poor' 
     colour = '#F79A38'; //pretty sure this is wrong 
     break; 
    case(counter<=(7.21*top/10)): 
     motto = 'Fair' 
     colour = '#FBDE07'; //pretty sure this is wrong 
     break;  
    case(counter<=(8.81*top/10)): 
     motto = 'Good' 
     colour = '#90C342'; //pretty sure this is wrong 
     break; 
    case(counter<=(9.61*top/10)): 
     motto = 'Excellent' 
     colour = '#1F9C4C'; //pretty sure this is wrong 
     break;  
    } 
    return { 
    counter: [counter,top], 
    text: Math.floor(counter) + '\n' + motto 
    } 
} 

Fiddle burada: http://jsfiddle.net/mwvLc0kb/4/

Answer 1

benim answser çok geç değil geliyor umut: konteynıra uydurma

1) IE üzerinde yanıltıcı olabilir, ama Chr/FF üzerinde daha kolay olabilir: aşağıdakileri yapmanız gerekecektir() my responsive gauge lib bkz:

• svg düğümüne ViewBox = "0 0 wh" preserveaspectratio = "xMinYMin karşılamak" ekleyin. piksel boyutu w ve h gerek yoktur, sadece oranı ayarlamak: bir kare için, = h = 1, w
• eklenti yüksekliği =% 100 ve maksimum genişlik = svg düğüm CSS% 100,
• tabi ki, svg üst div için bir yükseklik veya genişlik, IE için
• ayarlayın, svg düğümü ile birlikte bir tuval ekleyin, aksi takdirde svg düzgün boyutlandırmayacaktır. Eğer kavisin niteliklerini rengini ayarlamak zorunda

  2) bir pencere yeniden boyutlandırma sırasında göstergesi boyutlandırma daha zor IE üzerinde olduğunu

Not ... değil sayacın olanlar, this fiddle bakın.

archtype.customAttributes.arc = function(xloc, yloc, value, total, R, counter, top) { 
    var alpha = 360/total * value, 
    a = (90 - alpha) * Math.PI/180, 
    x = xloc + R * Math.cos(a), 
    y = yloc - R * Math.sin(a), 
    path; 

    if (total == value) { 
    path = [ 
     ["M", xloc, yloc - R], 
     ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R] 
    ]; 
    } else { 
    path = [ 
     ["M", xloc, yloc - R], 
     ["A", R, R, 0, +(alpha > 180), 1, x, y] 
    ]; 
    } 

    if (counter && top) { 
    var colour; 
    switch (true) { 
     case (counter <= (top/10)): 
     colour = '#BD2727'; //pretty sure this is wrong 
     break; 
     case (counter <= (5.61 * top/10)): 
     colour = '#F79A38'; //pretty sure this is wrong 
     break; 
     case (counter <= (7.21 * top/10)): 
     colour = '#FBDE07'; //pretty sure this is wrong 
     break; 
     case (counter <= (8.81 * top/10)): 
     colour = '#90C342'; //pretty sure this is wrong 
     break; 
     case (counter <= (9.61 * top/10)): 
     colour = '#1F9C4C'; //pretty sure this is wrong 
     break; 
    } 
    } 

    var result = { 
    path: path 
    }; 
    if (colour){ 
    result.stroke = colour; 
    } 

    return result; 
};