製品版のみの機能
カテゴリ チャート - 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>
<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" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/modules/infragistics.ui.chart.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>
<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>
</head>
<body>
<style type="text/css">
#categorychart {
position: relative;
float: left;
margin-right: 2%;
margin-bottom: 2%;
min-width: 210px;
}
#legend {
position: relative;
float: left;
}
</style>
<div style="height: 400px">
@(Html.Infragistics().CategoryChart<IgniteUI.SamplesBrowser.Models.Financial.FinancialDataPoint>(Model)
.ID("categorychart")
.Title("業務プログラム")
.Subtitle("部署ごとの予算および支出の比較")
.Width("800px")
.Height("400px")
.DataSource(Model)
.DataBind()
.Render()
)
</div>
</body>
</html>
using IgniteUI.SamplesBrowser.Models.Financial;
using System.Web.Mvc;
using System.Linq;
using IgniteUI.SamplesBrowser.Models.Repositories;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class CategoryChartController : Controller
{
//
// GET: /CategoryChart/
[ActionName("aspnet-mvc-helper")]
public ActionResult AspNetMvcHelper()
{
var financialData = new FinancialDataCollection();
return View("aspnet-mvc-helper", financialData);
}
}
}
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); } }
}
}