製品版のみの機能
カテゴリ チャート - 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); } } } }