Пользовательские цвета в JustGage не работают должным образом

Question

Я пытаюсь добавить пользовательские сектора в мой объект JustGage, и когда я добавляю их, он просто показывает по умолчанию:

0-25 = зеленый, 25-50 = желтый, 50-100 = красный

Я хочу, чтобы это раскололось так:

0-25 = красный, 25-50 = оранжевый, 50-75 = желтый, 75-100 = зеленый

Мой код ниже. Я определил свои customSectors так, как я хочу, но по умолчанию прибор по-прежнему возвращается к исходным 3 секторам. Я делаю что-то не так здесь. Я пытался найти некоторую документацию по JustGage, но на самом деле ее нет.

var Gage1 = new JustGage({
id: "gage-1", 
value: 100, 
min: 0,
max: 100,
showInnerShadow: false,
shadowOpacity : 0.3,
customSectors: [{
    color : "#CE1B21",
    lo : 0,
    hi : 25
}, {
    color : "#D0532A",
    lo : 25,
    hi : 50
}, {
    color : "#FFC414",
    lo : 50,
    hi : 75
}, {
    color : "#85A137",
    lo : 75,
    hi : 100
}],
valueFontColor : ['#4A98BE'], 
gaugeColor : ['#333'], 
    title: "Demo Gage",
label: "%"
});

ПРИМЕЧАНИЕ: я использую justgage.1.0.1.js

Answer 1

Я думаю, что все, что вам нужно, это levelColors:

var Gage1 = new JustGage({
  id: "gage-1", 
  value: 100, 
  min: 0,
  max: 100,
  levelColors: ['#CE1B21', '#D0532A', '#FFC414', '#85A137']
});

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

Answer 2

Если вы получите последнюю версию justgage, вы увидите, что "customSectors" находится в коде, где, если вы загружаете с их сайта, "customSectors" не существует.

Используйте ссылку ниже, чтобы получить последнюю версию, и ваш код должен работать просто отлично.

https://raw.github.com/toorshia/justgage/master/justgage.js

Answer 3

Конфиг, который работал у меня:

  config = {
    value: 0,
    min: 0,
    max: 600000,
    decimals: 0,
    gaugeWidthScale: 0.6,
    label: '$',
    formatNumber: true,
    customSectors: {
      percents: true,
      ranges: [
        {lo: 0, hi: 33, color: '#13ED5A'}, // lo and hi values are in %
        {lo: 34, hi: 67, color: '#49D61C'},
        {lo: 68, hi: 100, color: '#49AB1C'}
      ]
    }
  };