Mikhus/canvas-gauges

When using MinPath on RadialGauge jumps

Open

#190 aperta il 30 giu 2019

Vedi su GitHub
 (2 commenti) (1 reazione) (0 assegnatari)JavaScript (402 fork)github user discovery
help wanted

Metriche repository

Star
 (1601 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

Have utilised the below code that adjusts the needle according to a value I parse to it with jquery however I would now like to utilise "useMinPath" so that the needle does not need to go the long way around the 360 radialGauge. The needle however now jumps to the value provided instead of providing a smooth transition.

Any suggestions?

<script> var gaugePS = new RadialGauge({ renderTo: 'gauge-ps', width: 210, height: 210, minValue: 0, maxValue: 360, majorTicks: [ "N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW", "N" ], minorTicks: 22, ticksAngle: 360, startAngle: 180, strokeTicks: false, highlights: false, colorPlate: "#222", colorMajorTicks: "#f5f5f5", colorMinorTicks: "#ddd", colorNumbers: "#ccc", colorNeedle: "rgba(240, 128, 128, 1)", colorNeedleEnd: "rgba(255, 160, 122, .9)", valueBox: false, // valueInt: 3, // valueDec: 0, valueTextShadow: false, colorCircleInner: "#fff", colorNeedleCircleOuter: "#ccc", needleCircleSize: 15, needleCircleOuter: false, animationRule: "linear", animationValue: true, needleType: "arrow", needleWidth: 2, borders: true, borderInnerWidth: 0, borderMiddleWidth: 0, borderOuterWidth: 1, title: "DIRECTION", **useMinPath: true,** colorBorderOuter: "#ccc", colorBorderOuterEnd: "#ccc", colorNeedleShadowDown: "#222", borderShadowWidth: 0, animationTarget: "needle", animationDuration: 1500, }); gaugePS.draw(); </script>

Guida contributor