RadialGauge
RadialGauge
Scaling
This example demonstrates how to scale the RadialGauge control.
Features
Description
This example demonstrates how to scale the RadialGauge control.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MvcExplorer.Controllers { public partial class RadialGaugeController : Controller { public ActionResult Scaling() { 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | @section Styles{ < style > .custom-gauge.wj-gauge .wj-face path { fill: #f8f8f8; stroke: none; } .custom-gauge.wj-gauge .wj-pointer path { fill: #404040; stroke: none; } .custom-gauge.wj-gauge circle.wj-pointer { fill: #404040; stroke: none; transform-origin: center center 0px; transform: scale(1); transition: transform .5s; } .custom-gauge.wj-gauge.wj-state-focused circle.wj-pointer { fill: red; stroke: black; transform: scale(1.3); transition: transform 1s, fill 0.5s, stroke 0.5s; } </ style > } @section Scripts{ <script> var boundValue, valueInput, radialGauge; c1.documentReady( function () { boundValue = 0; getEles(); }); function getEles() { valueInput = wijmo.Control.getControl( '#valueInput' ); radialGauge = wijmo.Control.getControl( '#radialGauge' ); } function setValue(sender) { if (boundValue != sender.value) { boundValue = sender.value; radialGauge.value = valueInput.value = boundValue; } } </script> } @ (Html.C1().InputNumber().Id( "valueInput" ).Format( "n0," ).Value(0).Step(1000).Min(0) .Max(64000).OnClientValueChanged( "setValue" )) < br /> < div class = "row" style = "width:100%;" > < div class = "col-md-6" > @ (Html.C1().RadialGauge().Id( "radialGauge" ).CssStyles( new Dictionary< string , string > { { "width" , "100%" }, { "height" , "150px" }, { "padding" , "10px" } }) .ThumbSize(10).HasShadow( false ).Value(0).Format( "n0," ).Min(0).Max(64000).Step(1000).IsReadOnly( false ).OnClientValueChanged( "setValue" ) .Face(face => face.Thickness(0.08)) .Pointer(pointer => pointer.Thickness(0.08)) ) </ div > < div class = "col-md-6" > < div style = "position:relative;height:200px" > @for (var rpt = 1; rpt < 4 ; rpt++) { @ (Html.C1().RadialGauge().CssStyles( new Dictionary< string , string > { { "position" , "absolute" }, { "left" , "0" }, { "width" , "100%" }, { "height" , "200px" }, { "padding" , (rpt * 20 + "px" ) } }) .ThumbSize(10).HasShadow( false ).ShowText(ShowText.None).StartAngle(0).SweepAngle(270).AutoScale( false ).Value(10 - 2 * rpt) .Min(0).Max(10).IsReadOnly( false ) .Face(face => face.Thickness(0.08)) .Pointer(pointer => pointer.Thickness(0.08)) ) } </ div > </ div > </ div > @section Description{ @Html .Raw(Resources.RadialGauge.Scaling_Text0) } |