gauge.js -> Нужна модификация на JavaScript для функции PercentageColors - PullRequest
Новая
       29

gauge.js -> Нужна модификация на JavaScript для функции PercentageColors

0 голосов
/ 26 июня 2018

Я нашел этот удивительный измеритель JavaScript: http://bernii.github.io/gauge.js/

Можно сделать так, чтобы он выглядел как датчик 

new Gauge(target).setOptions(opts)

Или как пончик (тот, который мне нужен) 

new Donut(target).setOptions(opts)

В «режиме манометра» есть опция процент цветов , которая меняет цвет манометра при изменении его значения. Но этот параметр не работает в «режиме пончика».

Я пытался изменить gauge.js , но безуспешно ... любой мастер javascript мог бы помочь мне в этом?

Файл gauge.js находится по ссылке, и мой код для «вызова» находится здесь: 

var opts = {
angle: 0.46, 
lineWidth: 0.1, 
radiusScale: 1, 
pointer: {
   length: 0.6, 
   strokeWidth: 0.035, 
   color: '#000000'  
},
limitMax: false,     
limitMin: false,
percentColors: [[0.0, "#ff0000" ], [0.50, "#f9c802"], [1.0, "#a9d70b"]],
strokeColor: '#EEEEEE',  
generateGradient: true,
highDpiSupport: true,    
};

var target = document.getElementById('graph'); 
//var gauge = new Gauge(target).setOptions(opts); 
var gauge = new Donut(target).setOptions(opts); 
gauge.maxValue = 3000; 
gauge.setMinValue(0);  
gauge.animationSpeed = 32; 
gauge.set(3000); 
gauge.setTextField(document.getElementById('gauge-value'));

Спасибо!

1 Ответ

0 голосов
/ 04 июля 2018

Я нашел себе более простое решение, вместо использования функции parentColor в режиме «Пончик», я использовал некоторые ifs / elses, чтобы ограничить числа и установить цвет в этом конкретном месте: 

 if (value<=20)
 { 
  opts.colorStart='#291B00';
  opts.colorStop='#FF0000'; 
 }else if (value>20 && value <=60)
 { 
  opts.colorStart='#290000';
  opts.colorStop='#FF7E0D'; 
 }
 else if (value>60)
 { 
  opts.colorStart='#002903';
  opts.colorStop='#00FF00'; 
 }
...