gauge.js -> 需要修改 javascript 到 PercentageColors 函数

Question

我发现了这个惊人的 javascript 仪表：http://bernii.github.io/gauge.js/

有一个选项可以让它看起来像一个仪表

new Gauge(target).setOptions(opts)

或者像甜甜圈（我需要的那个）

new Donut(target).setOptions(opts)

在 "gauge mode" 中有一个选项 percentColors 可以在更改其值时更改仪表颜色。但是这个参数对 "donut mode".

不起作用

我尝试更改 gauge.js 但没有成功...任何 javascript 向导可以帮助我吗？

gauge.js 文件在 link 中，我的 "call it" 代码在这里：

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'));

谢谢！

Answer 1

我发现了一个更简单的解决方案，我没有在 Donut 模式下使用 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'; 
 }

gauge.js -> 需要修改 javascript 到 PercentageColors 函数

gauge.js -> Need modification on javascript to PercentageColors function

javascript

gauge

donut-chart