Как показать цвет по секторам с JustGage

Я пытаюсь заставить свои датчики показывать цвет по секторам (т.е. на var g1 я хотел бы зеленый 0-10, оранжевый 11-22 и красный 23-34).

Вариант сделать есть, но четких инструкций для нубов вроде меня нет.

Любая помощь будет оценена по достоинству.

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>

ДФГ


javascript php jquery justgage
person Jeremy    schedule 26.03.2013    source источник

Ответы (4)


arrow_upward
12
arrow_downward

Я вижу, вы используете levelColorsGradient: false при настройке первого датчика (g1). Это должно быть сделано в соответствии с документацией.

Документация говорит

выберите цветовое представление отображаемого значения на основе секторов. Это означает, что цвет останется зеленым для всех значений ниже 33%, желтым от 34% до 66%. Поднимите его выше 67%, и ваш датчик загорится красным. Эти три цвета являются стандартными.

Если вы хотите определить свои собственные цвета, документация говорит

// Цвета уровня: строка[]

// цвета индикатора, снизу вверх, в формате RGB

Поэтому создайте свою собственную переменную цветов, изменив приведенные ниже значения RGB на нужные цвета.

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

Затем установите этот параметр при настройке датчиков.

levelColors : myColors

Или, если вы хотите сохранить все это вместе, пропустите переменную и сделайте это. Я меняю среднее значение на оранжевый цвет.

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

Датчик сейчас показывает цвета по умолчанию? Я не думаю, что вы можете изменить сектора, они основаны на процентах.

person jmm    schedule 26.03.2013
comment
Да, спасибо, я тоже это понял, просто я не знаю, как изменить сектора, чтобы они устанавливались не на 0-33, 34-66, 67-100, а на интервалы, которые мне нужны (0-10, 11- 22, 23-34) - person Jeremy; 26.03.2013
comment
Почему-то я не думаю, что это возможно для каждого датчика? - person Jeremy; 26.03.2013
comment
Нет, я не вижу возможности изменить сектора, они установлены в этих процентах. Но это будет близко к цифрам, которые у вас есть. - person jmm; 26.03.2013
comment
Но если вы добавите больше цветов, количество секторов изменится, чтобы соответствовать. - person jmm; 26.03.2013
comment
Варианта не было, но сейчас автор добавил эту функцию по моей просьбе. - person Jeremy; 27.03.2013

arrow_upward
5
arrow_downward

Вы можете установить цвета с помощью свойства 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
});
person Eelco Koster    schedule 06.05.2014

arrow_upward
0
arrow_downward

Если вы установите 3 цвета, то каждый будет представлять 33%. Если установить 5 цветов, то каждый будет по 20%. Для максимального контроля в масштабе 100% вы можете установить массив из 100 элементов, каждый из которых будет представлять 1%. Цвета могут повторяться, поэтому первые 20 могут быть «# ff0000», чтобы первые 20% были красными. и т.д. Мне это было непонятно в инструкции.

person Tim Goyette    schedule 16.04.2015

arrow_upward
0
arrow_downward

Вы можете использовать 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

person Cherry Blossom Girl    schedule 15.06.2017