JustGageでセクター別に色を表示する方法

Question

セクターごとに色を表示しようとしています（例：var g1では緑色0-10、橙色11-22、赤色23-34）。

これを実行するオプションがありますが、私のようなnoobsについての明確な指示はありません。

ご協力いただければ幸いです。

http://www.justgage.com

<script> 
    var g1 = new JustGage({ 
    id: "score", 
    value: <?php 
print $content['field_anger_score'][0]['#markup']; 
?>, 
    min: 0, 
    max: 34, 
    title: "Your Anger Score", 
levelColorsGradient: false 
    }); 
var g2 = new JustGage({ 
    id: "passive-aggressive", 
    value: <?php 
print $content['field_passive_aggressive_score'][0]['#markup']; 
?>, 
    min: 0, 
    max: 14, 
    title: "Passive Aggressive" 
    }); 
var g3 = new JustGage({ 
    id: "aggressive", 
    value: <?php 
print $content['field_aggressive_score'][0]['#markup']; 
?>, 
    min: 0, 
    max: 6, 
    title: "Aggressive" 
    }); 
var g4 = new JustGage({ 
    id: "assertive", 
    value: <?php 
print $content['field_assertive_score'][0]['#markup']; 
?>, 
    min: 0, 
    max: 4, 
    title: "Assertive" 
    }); 

</script> 

DFG

Answer 1

は、私はあなたが最初のゲージ（G1）を設定しているときにlevelColorsGradient: falseを使用している参照してください。それはドキュメントに従ってそれを行うべきです。

documentaionは

が表示されている値のセクタベース色表現を選択すると言います。 は、色が33％未満のすべての値で緑色を維持することを意味し、黄色は34％から まで66％までです。 67％以上でゲージが赤く輝きます。これらは の3色です。

あなたはdocumenationが

// levelColors言う独自の色を定義する場合：RGB形式

で、下から上への表示の文字列[]

//色を、

独自の色の変数を作成し、下のRGB値を目的の色に変更します。

var myColors = [ 
    "#a9d70b", 
    "#f9c802", 
    "#ff0000" 
] 

ゲージ設定時にこのオプションを設定します。

levelColors : myColors 

また、すべてをまとめて保存する場合は、変数をスキップしてください。中間値をオレンジ色に変更します。

levelColors : [ "#a9d70b", "#F27C07", "#ff0000" ] 

ゲージが現在デフォルトの色を表示していますか？私はあなたがセクターを変えることができるとは思わない、彼らはパーセントに基づいています。

Answer 2

あなたは3色を設定した場合、それぞれが33％を表しますcustomSectorsプロパティ

var g1 = new JustGage({ 
    id: "score", 
    value: <?php 
    print $content['field_anger_score'][0]['#markup']; 
    ?>, 
    min: 0, 
    max: 34, 
    title: "Your Anger Score", 
    customSectors : [{"lo":0,"hi":10,"color":"#a9d70b"}, 
        {"lo":11,"hi":22,"color":"#f9c802"}, 
        {"lo":23,"hi":34,"color":"#ff0000"}], 
    levelColorsGradient: false 
}); 

Answer 3

で色を設定することができます。 5色を設定すると、それぞれ20％になります。 100％スケールでの最大限の制御のために、100要素の配列を設定することができ、それぞれが1％を表します。最初の20％が赤であるために、最初の20％はすべて "＃ff0000"になるように、色を繰り返すことができます。これは指示に私には分かりませんでした。

Answer 4

あなたはパーセントでcustomSectosを使用することができます：真、

######September 26, 2016. - release 1.2.9 

######customSectors receives structural update + additional "percents" feature (define ranges in %). 
    customSectors: { 
      percents: true, 
      ranges: [{ 
      color : "#43bf58", 
      lo : 0, 
      hi : 50 
      },{ 
      color : "#ff3b30", 
      lo : 51, 
      hi : 100 
      }] 
     } 

はリファレンス：https://github.com/toorshia/justgage