RadialGauge
RadialGauge
Editing Values
This example demonstrates how to use the isReadOnly and step properties with the RadialGauge controls.
Features
Settings
Is Read Only: False
Step: 0.5
Show Ticks: False
Show Tick Text: False
Needle Shape: None
Needle Length: Outer
Description
This example demonstrates how to use the isReadOnly and step properties with the RadialGauge controls.
ShowTicks: determines whether the gauge should display tickmarks at each step or tickSpacing value.
ShowTickText: determines whether the gauge should display the text value of each tick mark.
NeedleShape: determines the shape of the gauge's needle element.
NeedleLength: determines the length of the gauge's needle element with respect to the pointer range.
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 | using Microsoft.AspNetCore.Mvc; using System.Collections.Generic; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class RadialGaugeController : Controller { public ActionResult Editing() { ViewBag.DemoSettings = true; ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = CreateEditingSettings() }; return View(); } private static IDictionary<string, object[]> CreateEditingSettings() { var settings = new Dictionary<string, object[]> { {"IsReadOnly", new object[]{false, true }}, {"Step", new object[]{0.5, 1, 2}}, {"ShowTicks", new object[]{ false, true}}, {"ShowTickText", new object[]{ false, true}}, {"NeedleShape", new object[]{ "None", "Triangle", "Diamond", "Hexagon", "Rectangle", "Arrow", "WideArrow", "Pointer", "WidePointer", "Outer"}}, {"NeedleLength", new object[]{ "Outer", "Middle", "Inner"}}, }; return settings; } } } |
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 | @{ ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; } @section Styles{ <style> .wj-gauge .wj-tick-text text { opacity: 1; font-family: Courier; font-size: 8pt; fill: purple; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; } .fixRadiaGauge{ padding-left:25px; overflow:inherit; } </style> } <c1-radial-gauge id="@demoSettingsModel.ControlId" min="0" max="10" value="5" is-read-only="false" step="0.5" format="" width="300px" height="250px" class="fixRadiaGauge" show-ticks="false" show-tick-text="false" show-text="None" needle-shape="None" needle-length="Outer"> </c1-radial-gauge> @section Description{ <p>@Html.Raw(RadialGaugeRes.Editing_Text0)</p> <p>@Html.Raw(RadialGaugeRes.Editing_Text1)</p> <p>@Html.Raw(RadialGaugeRes.Editing_Text2)</p> <p>@Html.Raw(RadialGaugeRes.Editing_Text3)</p> <p>@Html.Raw(RadialGaugeRes.Editing_Text4)</p> } |