bernii / gauge.js

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

Multiple needles: different colors? #193

Open lorenzo11 opened 5 years ago

lorenzo11 commented 5 years ago

Thank you for the trick of sending an array of value instead of a value to the .set() method. It is working perfectly!

image

Do you have any idea how we could differentiate the colors of these 2 needles? I would need to have the first needle of one color, and the second of another color.

Thanks for the help

Originally posted by @lorenzo11 in https://github.com/bernii/gauge.js/issues/127#issuecomment-428665580

kplindegaard commented 5 years ago

Well, I'm not quite sure how little you can get away with. First check the GaugePointer class' render function. In there you see how the pointer is drawn and that the color is taken directly from the options object.

As far as I remember, each pointer more or less lives its own life. This means that you could consider to override each options.color property in the gauge.set method when the pointers' values and options are updated.

NicFragale commented 5 years ago

Adding to Kplindegaard said. This does indeed work, but you are working with un-named pointers. So the trick is to set the color then initialize the pointer. The result will give you colored pointers (/needles). Keep in mind that you must initialize the gauge with the first color in the option set from when you pass options in or you won't be able to change that first color. image image