Pointer Element
The "pointer" is a range that indicates the gauge's current value. The "max" property of the pointer range corresponds to the "value" property of the gauge.
- C1Gauge/ElementsPointer.js
- C1Gauge/ElementsPointer.css
- ElementsPointerController.cs
- ElementsPointer.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // This file locates: "Scripts/Lesson/C1Gauge/ElementsPointer.js". c1.documentReady(function () { var theGauge = wijmo.Control.getControl( '#theGauge' ); var theColor = wijmo.Control.getControl( '#theColor' ); var theThickness = wijmo.Control.getControl( '#theThickness' ); theColor.value = theGauge.pointer.color; theColor.valueChanged.addHandler(function (s, e) { theGauge.pointer.color = s.value; }); theThickness.value = theGauge.pointer.thickness; theThickness.valueChanged.addHandler(function (s, e){ theGauge.pointer.thickness = s.value; }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // This file locates: "Content/css/Lesson/C1Gauge/ElementsPointer.css". .wj-gauge { height: 150px; margin: 20px auto; padding: 12px; background: rgba(0, 0, 0, .02); box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); } .wj-gauge .wj-pointer { fill: black; } label { width: 120px; text-align: right; } .wj-dropdown, .wj-inputnumber { width: 120px; margin-bottom: 6px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1GaugeController : Controller { // GET: ElementsPointer public ActionResult ElementsPointer() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | < h1 > @Html .Raw(Resources.C1Gauge.ElementsPointer_Title) </ h1 > < p > @Html .Raw(Resources.C1Gauge.ElementsPointer_Text1) </ p > < div class = "row demo-settings" > < div class = "col-xs-6" > < label for = "theColor" > @Html .Raw(Resources.C1Gauge.ElementsPointer_Text2)</ label > @Html .C1().InputColor().Id( "theColor" ) < br /> < label for = "theThickness" > @Html .Raw(Resources.C1Gauge.ElementsPointer_Text3)</ label > @Html .C1().InputNumber().Id( "theThickness" ).Min(0).Max(1).Step(0.1).Format( "n2" ) </ div > < div class = "col-xs-6" > @ (Html.C1().RadialGauge().Id( "theGauge" ) .StartAngle(-30).SweepAngle(240) .Value(50).Max(100) .IsReadOnly( false ) .HasShadow( false ) .ShowText(ShowText.All) ) </ div > </ div > |