Text Values
C1 MVC gauges have three properties that affect text display:
- showText: Determines whether the gauge should show min, max, and/or current values as text elements,
- format: Gets or sets the format string used to convert numeric values into strings, and
- getText: A callback function used to provide custom strings to display the values.
- C1Gauge/ElementsTextValues.js
- C1Gauge/ElementsTextValues.css
- ElementsTextValuesController.cs
- ElementsTextValues.cshtml
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 26 27 28 29 30 31 32 33 34 | // This file locates: "Scripts/Lesson/C1Gauge/ElementsTextValues.js". c1.documentReady(function () { var theGauge = wijmo.Control.getControl( '#theGauge' ); var showText = wijmo.Control.getControl( '#showText' ); var format = wijmo.Control.getControl( '#format' ); // customize text properties showText.textChanged.addHandler(function (s, e) { theGauge.showText = s.text; }); format.textChanged.addHandler(function (s, e) { theGauge.format = s.text; }); document.getElementById( 'getText' ).addEventListener( 'click' , function (e) { theGauge.getText = e.target. checked ? getTextCallback : null ; }); // getText callback function function getTextCallback(gauge, part, value, text) { switch (part) { case 'value' : if (value <= 10) return 'Empty!' ; if (value <= 25) return 'Low...' ; if (value <= 95) return 'Good' ; return 'Full' ; case 'min' : return 'empty' ; case 'max' : return 'full' ; } return text; } }); |
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/ElementsTextValues.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: ElementsTextValues public ActionResult ElementsTextValues() { 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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | @ { var showTexts = new [] { "None" , "Value" , "MinMax" , "All" }; var formats = new [] { "n0" , "n2" , "c0" , "c2" }; } < h1 > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Title) </ h1 > < p > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text1) </ p > < ul > < li > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text2) </ li > < li > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text3) </ li > < li > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text4) </ li > </ ul > < div class = "row demo-settings" > < div class = "col-xs-6" > < label for = "showText" > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text5)</ label > @Html .C1().ComboBox().Id( "showText" ).Bind(showTexts).Text( "All" ) < br /> < label for = "format" > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text6)</ label > @Html .C1().ComboBox().Id( "format" ).Bind(formats).Text( "n0" ) < br /> < label for = "getText" > @Html .Raw(Resources.C1Gauge.ElementsTextValues_Text7)</ label > < input id = "getText" type = "checkbox" > </ div > < div class = "col-xs-6" > @ (Html.C1().RadialGauge().Id( "theGauge" ) .StartAngle(-30).SweepAngle(240) .Value(80).Max(100) .IsReadOnly( false ) .HasShadow( false ) .ShowText(ShowText.All) .ShowRanges( false ) .Ranges(r => { r.Add().Min(0).Max(25).Color(System.Drawing.Color.Red); r.Add().Min(25).Max(50).Color(System.Drawing.Color.Orange); r.Add().Min(50).Max(100).Color(System.Drawing.Color.Green); }) .Pointer(p=>p.Thickness(0.15)) .ThumbSize(20) ) </ div > </ div > |