FlexPie
複数のグラフ
機能
サンプル
1行あたりのチャート
説明
このサンプルは、同じデータソースに基づいて複数の円グラフを作成する方法を示しています。 複数の円グラフを作成するには、バインドで複数のコンマ区切りプロパティを指定するだけです。
ソース
MultipleChartController.cs
using MvcExplorer.Models;
using Microsoft.AspNetCore.Mvc;
namespace MvcExplorer.Controllers
{
public partial class FlexPieController : Controller
{
public ActionResult MultipleChart()
{
return View(ProductSales.GetData());
}
}
}
MultipleChart.cshtml
@model IEnumerable<ProductSales>
@section Styles{
<style type="text/css">
.wj-flexchart {
height: 600px;
}
</style>
}
@section Scripts{
<script>
function chartsPerLineChanged(sender, args) {
var multipleChart = wijmo.Control.getControl('#multipleChart');
multipleChart.chartsPerLine = sender.value;
}
</script>
}
<c1-flex-pie id="multipleChart" header="Product" binding-name="Country" binding="Downloads,Sales,Refunds,Damages">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel>
</c1-flex-pie>
<p style="display:inline;margin: 1em;">@Html.Raw(FlexPieRes.Multiple_Text1)</p>
@(Html.C1().InputNumber().Min(0).Max(4).Step(1).Value(0).Format("n0").OnClientValueChanged("chartsPerLineChanged"))
@section Description{
<p>@Html.Raw(FlexPieRes.Multiple_Text0)</p>
}
マニュアル