This sample demonstrates how to specify radial gauge needles.
For detailed implementation, please take a look at the HTML code tab. <!DOCTYPE html> <html> <head> <title> Needles Example - HTML5 jQuery Radial Gauge Plugin by jqChart </title> <link rel="stylesheet" type="text/css" href="../../css/jquery.jqGauges.css" /> <script src="../../js/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../../js/jquery.jqGauges.min.js" type="text/javascript"></script> <script lang="javascript" type="text/javascript"> $(document).ready(function () { var anchorGradient = { type: 'radialGradient', x0: 0.35, y0: 0.35, r0: 0.0, x1: 0.35, y1: 0.35, r1: 1, colorStops: [{ offset: 0, color: '#4F6169' }, { offset: 1, color: '#252E32'}] }; $('#jqRadialGauge').jqRadialGauge({ background: '#F7F7F7', border: { lineWidth: 8, strokeStyle: '#76786A', padding: 10 }, anchor: { visible: true, fillStyle: anchorGradient }, animation: { duration: 1 }, scales: [ { minimum: 0, maximum: 12, interval: 1, startAngle: 270, endAngle: 630, labels: { offset: 0.85, showFirstLabel: false, font: '14px sans-serif' }, minorTickMarks: { visible: true, interval: 0.2, offset: 0.98 }, majorTickMarks: { lineWidth: 3, offset: 0.97 }, needles: [ { type: 'pointer', title: 'Pointer', value: 1, outerOffset: 0.5, mediumOffset: 0.4, width: 12, fillStyle: '#252E32' }, { type: 'triangle', title: 'Triangle', value: 6, outerOffset: 0.75, width: 15, fillStyle: '#252E32' }, { type: 'line', title: 'Line', value: 10, outerOffset: 0.75, innerOffset: -0.2, lineWidth: 3, fillStyle: '#252E32' }, { type: 'rectangle', title: 'Rectangle', value: 8, outerOffset: 0.75, innerOffset: -0.2, width: 8, fillStyle: '#252E32' } ] } ] }); }); </script> </head> <body> <div> <div id="jqRadialGauge" style="width: 350px; height: 350px;"> </div> </div> </body> </html> |