製品版のみの機能
円チャート - ASP.NET MVC の使用
このサンプルは、ASP.NET MVC ヘルパーによって作成された円チャートを表示します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@using IgniteUI.SamplesBrowser.Models
@model IgniteUI.SamplesBrowser.Models.Financial.FinancialDataCollection
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/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/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<style type="text/css">
.ui-slider-handle.ui-state-focus {
outline: none 0;
}
#chart {
position: relative;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
#legend {
position: relative;
float: left;
}
.tooltip {
font-weight: bold;
}
</style>
@(Html.Infragistics().PieChart(Model.AsQueryable())
.ID("chart")
.Width("435px")
.Height("435px")
.ValueMemberPath(data => data.Budget)
.LabelMemberPath(data => data.Label)
.ExplodedSlices("0 1")
.RadiusFactor(.8)
.Legend(leg => leg.ID("legend").LegendType(LegendType.Item))
.AllowSliceExplosion(true)
.ShowTooltip(true)
.TooltipTemplate("<div class='tooltip'>${item.Label}</div><div>" + "予算" + ": ${item.Budget}</div>")
.DataBind()
.Render()
)
</body>
</html>
using IgniteUI.SamplesBrowser.Models.Financial;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class PieChartController : Controller
{
//
// GET: /PieChart/
[ActionName("aspnet-mvc-helper")]
public ActionResult AspNetMvcHelper()
{
FinancialDataCollection data = new FinancialDataCollection();
return View("aspnet-mvc-helper", data);
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace IgniteUI.SamplesBrowser.Models.Financial
{
public class FinancialDataCollection : List<FinancialDataPoint>
{
public FinancialDataCollection()
{
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "管理", });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "セールス", });
this.Add(new FinancialDataPoint { Spending = 80, Budget = 40, Label = "マーケティング", });
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "開発", });
this.Add(new FinancialDataPoint { Spending = 60, Budget = 20, Label = "サポート", });
this.Add(new FinancialDataPoint { Spending = 20, Budget = 60, Label = "IT", });
}
}
public class FinancialDataPoint
{
public string Label { get; set; }
public double Spending { get; set; }
public double Budget { get; set; }
public string ToolTip { get { return String.Format("{0}, 支出 {1}, 予算 {2}", Label, Spending, Budget); } }
}
}