bernii / gauge.js

100% native and cool looking JavaScript gauge
MIT License
1.42k stars 391 forks source link

JS error after applying percentColors #227

Open TimurNurlygayanov opened 4 years ago

TimurNurlygayanov commented 4 years ago

Hi, thank you very much for this cool library!

It looks like I've found a bug or maybe I'm not properly using the parameters.

Steps To Reproduce:


    var opts = {
            angle: -0.2, // The span of the gauge arc
            lineWidth: 0.2, // The line thickness
            radiusScale: 1, // Relative radius
            pointer: {
                length: 0.6, // // Relative to gauge radius
                strokeWidth: 0.035, // The thickness
                color: '#000000' // Fill color
            },
            limitMax: false,     // If false, max value increases automatically if value > maxValue
            limitMin: false,     // If true, the min value of the gauge will be fixed
            colorStart: '#6FADCF',   // Colors
            colorStop: '#8FC0DA',    // just experiment with them
            strokeColor: '#E0E0E0',  // to see which ones work best for you
            generateGradient: true,
            highDpiSupport: true,     // High resolution support
        };
        var target = document.getElementById('speedometer'); // your canvas element
        var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
        gauge.maxValue = 100; // set max gauge value
        gauge.percentColors = [[0.0, "#a9d70b" ], [0.50, "#f9c802"], [1.0, "#ff0000"]];
        gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
        gauge.animationSpeed = 32; // set animation speed (32 is default value)

        // TODO: get value
        gauge.set(93); // set actual value

After gauge.set I'm getting the following JS error:

gauge.min.js:1 Uncaught TypeError: Cannot read property 'r' of undefined
    at M.getColorForPercentage (gauge.min.js:1)
    at M.getColorForValue (gauge.min.js:1)
    at M.render (gauge.min.js:1)
    at M.f.update (gauge.min.js:1)
    at Object.run (gauge.min.js:1)
    at M.set (gauge.min.js:1)
    at <anonymous>:1:7
M.getColorForPercentage @ gauge.min.js:1
M.getColorForValue @ gauge.min.js:1
M.render @ gauge.min.js:1
f.update @ gauge.min.js:1
run @ gauge.min.js:1
M.set @ gauge.min.js:1
(anonymous) @ VM1647:1
austenstone commented 2 years ago

The issue is with this line

gauge.percentColors = [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]];

Put it in your opts objects.

var opts = {
  ...
  percentColors: [[0.0, "#a9d70b"], [0.50, "#f9c802"], [1.0, "#ff0000"]]
}

It's a bug.