製品版のみの機能
ドーナツ型チャート - コレクションにバインド
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
|
部門
予算 vs 支出
|
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、ASP.NET MVC ヘルパーを使用して igDoughnutChart を描画する方法を紹介します。ヘルパーはサーバーのオブジェクトのコレクションにバインドし、コレクションを JSON オブジェクトにシリアル化し、必要な igDoughnutChart HTML および JavaScript を描画します。
コード ビュー
クリップボードへコピー
@using Infragistics.Web.Mvc
@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 type="text/javascript">
function doughnutSliceClick(e, ui) {
ui.slice.isSelected = !ui.slice.isSelected;
}
</script>
<script id="budgetTooltipTemplate" type="text/x-ig-tmpl">
<div style="padding: 5px">
<span id="tooltipValue" style="font-family: Arial; font-size: 12px;">${item.Label} <br> 予算: <b>$${item.Budget}K</b></span>
</div>
</script>
<script id="spendingTooltipTemplate" type="text/x-ig-tmpl">
<div style="padding: 5px">
<span id="tooltipValue" style="font-family: Arial; font-size: 12px;">${item.Label} <br> 支出: <b>$${item.Spending}K</b></span>
</div>
</script>
</head>
<body>
<table>
<tr>
<td style="width: 550px;">
<div style="text-align: center; width: 100%; font:16px Arial, Helvetica, sans-serif;">部門</div>
<div style="text-align: center; width: 100%; margin: 10px 0; font:12px Arial, Helvetica, sans-serif;">予算 vs 支出</div>
@(Html.Infragistics().DoughnutChart()
.ID("MyDoughnutChart")
.InnerExtent(30)
.Width("100%")
.Height("500px")
.AllowSliceSelection(true)
.AddClientEvent(DoughnutChartClientEvents.SliceClick, "doughnutSliceClick")
.Series(s =>
{
s.Ring("Budget", Model.AsQueryable())
.LabelMemberPath(o => o.Label)
.ValueMemberPath(o => o.Budget)
.LabelsPosition(LabelsPosition.Center)
.TooltipTemplate("budgetTooltipTemplate")
.ShowTooltip(true)
.SelectedStyle(selStyle => selStyle.Fill("#9f725f").Stroke("#745345"))
.Legend(lg => lg.LegendType(LegendType.Item).Width("150px").ID("legend"));
s.Ring("Spending", Model.AsQueryable())
.LabelMemberPath(o => o.Label)
.ValueMemberPath(o => o.Spending)
.TooltipTemplate("spendingTooltipTemplate")
.ShowTooltip(true)
.LabelsPosition(LabelsPosition.Center)
.SelectedStyle(selStyle => selStyle.Fill("#9f725f").Stroke("#745345"));
}).Render())
</td>
<td style="vertical-align: top;">
<div id="legend"></div>
</td>
</tr>
</table>
</body>
</html>
using System.Web.Mvc;
using IgniteUI.SamplesBrowser.Models.Financial;
namespace IgniteUI.SamplesBrowser.Controllers
{
public class DoughnutChartController : Controller
{
[ActionName("bind-to-collection")]
public ActionResult BindCollection()
{
var invoices = new FinancialDataCollection();
return View("bind-to-collection", invoices);
}
}
}
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); } }
}
}