製品版のみの機能
ラジアル ゲージ - ASP.NET MVC
このサンプルでは、ASP.NET MVC ヘルパーを使用して igRadialGauge を描画する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このヘルパーは igRadialGauge コントロールのさまざまなオプションを設定し、必要な HTML および JavaScript を描画します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2024.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2024.1/latest/js/infragistics.dv.js"></script>
</head>
<body>
@(
Html.Infragistics().RadialGauge()
.ID("radialgauge")
.Width("100%")
.Height("500px")
.BackingShape(RadialGaugeBackingShape.Circular)
.Value(2)
.Interval(10)
.LabelInterval(10)
.LabelExtent(0.7)
.MinimumValue(0)
.MaximumValue(100)
.ScaleEndAngle(55)
.ScaleStartAngle(125)
.ScaleStartExtent(0.49)
.ScaleEndExtent(0.57)
.ScaleBrush("Gray")
.ScaleSweepDirection(SweepDirection.Clockwise)
.CenterX(0.5)
.CenterY(0.5)
.TickStartExtent(0.50)
.TickEndExtent(0.57)
.TickStrokeThickness(3)
.MinorTickStartExtent(0.57)
.MinorTickEndExtent(0.54)
.MinorTickStrokeThickness(1)
.NeedleStartExtent(0)
.NeedleEndExtent(0.48)
.NeedleShape(RadialGaugeNeedleShape.Needle)
.NeedlePivotShape(RadialGaugePivotShape.CircleOverlay)
.TransitionDuration(0)
.Ranges(r =>
{
r.Range("range2")
.StartValue(70)
.EndValue(100)
.InnerStartExtent(0.5)
.InnerEndExtent(0.5)
.OuterStartExtent(0.61)
.OuterEndExtent(0.65)
.StrokeThickness(0.5);
r.Range("range3")
.StartValue(50)
.EndValue(70)
.InnerStartExtent(0.5)
.InnerEndExtent(0.5)
.OuterStartExtent(0.57)
.OuterEndExtent(0.61)
.StrokeThickness(0.5);
})
.Render()
)
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class RadialGaugeController : Controller
{
//
// GET: /RadialGauge/
[ActionName("mvc-initialization")]
public ActionResult RenderGauge()
{
return View("mvc-initialization");
}
}
}