Jak wyświetlać kolory według sektorów za pomocą JustGage

Question

Próbuję ustawić wskaźniki według koloru (np. W var g1 Chciałbym zielony 0-10, pomarańczowy 11-22 i czerwony 23-34).

Istnieje opcja, aby to zrobić, ale nie ma jasnych instrukcji dla noobów takich jak ja.

Każda pomoc zostanie doceniona.

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

widzę używasz levelColorsGradient: false podczas konfigurowania pierwszego Gage (G1). Powinno to nastąpić zgodnie z dokumentacją.

funkcja dokumentowania mówi

wybrać sektora opartego odwzorowanie kolorów wyświetlanej wartości. To oznacza, że ​​kolor pozostanie zielony dla wszystkich wartości poniżej 33%, żółty z 34% aż do 66%. Weź to ponad 67%, a twój wskaźnik będzie świecił na czerwono. Te trzy kolory to domyślne kolory.

Jeśli chcesz zdefiniować własne kolory z Documenation mówi

// levelColors: string []

// barwy wskaźnika, od dolnej do górnej, w formacie RGB

Stwórz własną zmienną kolorów, zmieniając poniższe wartości RGB dla żądanych kolorów.

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

A następnie ustaw tę opcję podczas ustawiania wskaźników.

levelColors : myColors 

Lub jeśli chcesz zachować wszystko razem, pomiń zmienną i zrób to. Zmieniam środkową wartość na kolor pomarańczowy.

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

Czy wskaźnik pokazuje teraz domyślne kolory? Nie sądzę, że możesz zmienić sektory, są one oparte na procentach.

Answer 2

Można ustawić kolory z właściwością 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

Jeśli ustawisz 3 kolory wtedy każdy będzie reprezentować 33%. Jeśli ustawisz 5 kolorów, każdy z nich będzie miał 20%. W celu uzyskania maksymalnej kontroli w skali 100% można ustawić tablicę 100 elementów, a każdy z nich reprezentowałby 1%. Kolory mogą się powtarzać, więc pierwszych 20 może oznaczać "# ff0000", aby pierwsze 20% było czerwone. itp. Nie było to dla mnie jasne w instrukcjach.

Answer 4

Można użyć customSectos z procentach: true,

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

referencyjny: https://github.com/toorshia/justgage