search

bernii / gauge.js

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

Line pointer rectangular #126

Open maverick42 opened 7 years ago

maverick42 commented 7 years ago

Hi,

It is possible to have a line pointer like this ?

image

Best Fréderik

kplindegaard commented 7 years ago

That's definitely doable. The GaugePointer class is responsible for drawing the pointer, and today it does that roughly like this:

  1. Draw circle of radius options.pointer.strokeWidth at the center.
  2. Make a rotated, filled rectangle from center+strokewidth to pointer length and back to center-strokewidth.

Right now the GaugePointer.render() function is hardcoded to do just that. One option could be to generalize this so user can supply their own optional rendering function. This is probably the most flexible alternative. Another approach is to extend the set of options gauge.js has today and let the user choose between different types of pointers (today's triangular shape, rectangular, or others). Personally, I would be in favor of the first approach, though.