2016-04-06 17 views
0

異なるインスタンスで親と変更ゲージの色に合わせて2)...これは私がこれまで行ってきたものですが、それは動作しません異なるインスタンスで、ゲージの色を変更します。ここスケールSVG画像は、私が使用して、以下のラファエルを実行しようとしてい

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 
    } 
} 

はフィドル:http://jsfiddle.net/mwvLc0kb/4/

答えて

1

私は私のanswserがあまりにも遅くはない来る願っています:

1)の容器にフィットIEに注意が必要ですが、Chr関数/ FFに簡単ですがあります。あなたは次のことを行う必要があります(my responsive gauge libを参照してください):

  • viewbox = "0 0 wh" preserveAspectRatio = "xMinYMin meet"をsvgノードに追加します。 wとhをピクセルサイズにする必要はありません。これらの値は、svgノードCSS =
  • 高さ= 100%、最大幅= 100%の正方形の比率のみを設定します。
  • もちろん、svg親divに
  • (IE用)を設定し、svgノードとともにキャンバスを追加します。そうしないと、svgのサイズが正しく設定されません。ウィンドウのサイズ変更時のゲージのサイズを変更する... IE上

    2、よりトリッキーであることを

注)あなたはthis fiddleを参照して、アークの属性ではなく、カウンターのものに色を設定する必要がありました。

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; 
}; 
関連する問題