This sample demonstrates how to change the color of the text foreground. Please note that the textForegroundUnlit option is used for the unlit segments only, while
textForeground is used for the lit segments of the display.
For detailed implementation, please take a look at the Aspx, Razor and Controller code tabs. <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> <%@ Import Namespace="JQChart.Web.Mvc" %> <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="<%: Url.Content("~/Scripts/jquery-1.11.1.min.js") %>" type="text/javascript"></script> <script src="<%: Url.Content("~/Scripts/jquery.jqGauges.min.js") %>" type="text/javascript"></script> <body> <div> <%=Html.JQSegmentedDisplay().SegmentedDisplay() .Width(500) .Height(100) .Background("#DCDCDC") .Digits(11) .SegmentMode(SegmentMode.FourteenSegment) .Text("Hello World") .TextForeground("#6ba851") .TextForegroundUnlit("#DCDCDC") .Border(border => { border.StrokeStyle("#76786A").Padding(10).LineWidth(4); }) .Render()%> </div> </body> </html> @using JQChart.Web.Mvc <!DOCTYPE html> <html> <head runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="~/Content/jquery.jqGauges.css" /> <script src="@Url.Content("~/Scripts/jquery-1.11.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.jqGauges.min.js")" type="text/javascript"></script> <body> <div> @(Html.JQSegmentedDisplay().SegmentedDisplay() .Width(500) .Height(100) .Background("#DCDCDC") .Digits(11) .SegmentMode(SegmentMode.FourteenSegment) .Text("Hello World") .TextForeground("#6ba851") .TextForegroundUnlit("#DCDCDC") .Border(border => { border.StrokeStyle("#76786A").Padding(10).LineWidth(4); }) .Render() ) </div> </body> </html> using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using SamplesBrowser.Models; namespace GaugesSamplesBrowser.Controllers { public class GaugeController : Controller { public ActionResult TextForegroundUnlit() { return View(); } } } |