Adding a pointer/arrow to an "svg-gauge" chart-CodePudding

I am working with a JS/CSS Gauge chart (https://github.com/naikus/svg-gauge) and looking for a way to add an "arrow pointer" to it. The pointer would be matching the path/value. Previous attempts have come up with no valuable results. Any insight/suggestions would be greatly appreciated. JS is not my primary skill-set, so there's that :|

            // JavaScript
            var Gauge = window.Gauge;
            var gauge1 = Gauge(
              document.getElementById("gauge1"), {
                min: 0,
                max: 5,
                dialStartAngle: 180,
                dialEndAngle: 0,
                value: sentValue,
                label: function(value) {
                  return Math.round(value * 100) / 100;
                },
                 color: function(value) {
                    if(value <= 1) {
                      return "#D5001C";
                    }else if(value <= 2) {
                      return "#EF6B1A";
                    }else if(value <= 3) {
                      return "#F5A706";
                    }else if(value <= 4) {
                      return "#AFC63F";
                    }else if(value <= 5) {
                      return "#7FBC03";
                    }else {
                      return "#ef4655";
                    }
                  }
              }
            );

// PHP/HTML
echo '<div >';
echo '<div id="gauge1" >';
echo '<span >Label Text</span>';
echo '<span >Text</span>';
echo '</div>';
echo '</div>';

CodePudding user response：

With that library, the process is relatively straight-forward.

Somewhere on your page, define a SVG marker with id=""arrow" in a hidden <svg> container (see code below).
In your stylesheet, add marker-end: url(#arrow) to a rule targeting the .gauge-container > .gauge .value element.
The one thing that needs a bit more work is coloring the arrow according to the gauge color. For that, move the anonymous function returning the color values to a named function so you can reference it. Then, each time you set the value, also set the fill color of the marker:
```
document.getElementById("arrow").style.fill = getColor(value);
```
If you have multiple gauges on the page that could have different colors, you will need to define an individual arrow for each of them, even if they have the same shape.

In the future, it should be possible to just statically set fill="current-stroke" on the marker element, but it does not work yet.

function getColor(value) {
  return [
    "#ef4655",
    "#D5001C",
    "#EF6B1A",
    "#F5A706",
    "#AFC63F",
    "#7FBC03"
  ][Math.ceil(value)];
}

var Gauge = window.Gauge;
var gauge1 = Gauge(
  document.getElementById("gauge1"), {
    min: 0,
    max: 5,
    dialStartAngle: 180,
    dialEndAngle: 0,
    value: 0,
    label: function(value) {
      return Math.round(value * 100) / 100;
    },
     color: getColor
  }
);

gauge1.setValue(2.6);
document.getElementById("arrow").style.fill = getColor(2.6);

#gauge1.gauge-container > .gauge .value {
  marker-end: url(#arrow);
}

<script src="https://rawgit.com/naikus/svg-gauge/master/dist/gauge.min.js"></script>

<svg width="0" height="0">
  <marker id="arrow" orient="auto" markerUnits="strokeWidth"
          viewBox="-8 -8 16 16" markerWidth="3" markerHeight="3">
     <path d="M-4-8V8L8,0Z" />
  </marker>
</svg>

<div >
  <div id="gauge1" >
    <span >Label Text</span>
    <span >Text</span>
  </div>
</div>