FlexChart
FlexChart
軸グループ
機能
サンプル
説明
このビューにはグループオプション付きの FlexChart が表示されます
FlexChart の軸は、チャートのデータソースとして指定された CollectionView で定義されたグループをサポートするようになりました。 グループを表示するには、コレクションビューでグループを作成し、AxisGroupsOptions にて Display を設定する必要があります
ソース
AxisGroupsController.cs
using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController { public ActionResult AxisGroups() { var model = new ClientSettingsModel { Settings = CreateGroupsOptionSettings(), DefaultValues = new Dictionary<string, object> { {"AxisX.GroupsOptions.Display", "Show"} } }; ViewBag.CitiesSales = CitySale.GetData(8); return View(model); } private static IDictionary<string, object[]> CreateGroupsOptionSettings() { var settings = new Dictionary<string, object[]> { {"AxisX.GroupsOptions.Display", new object[]{"None", "Show", "ShowGrid"}} }; return settings; } } }
AxisGroups.cshtml
@{ // ViewBag.DemoSettings = true; // ViewBag.DemoSettingsModel = Model; IEnumerable<CitySale> CitySaleDatas = ViewBag.CitiesSales; } <c1-items-source id="CVService" group-by="CountryName" source-collection="@CitySaleDatas" page-size="16"></c1-items-source> <c1-flex-chart id="@Model.ControlId" header="@FlexChartRes.Axes_Sales" items-source-id="CVService"> <c1-flex-chart-series name="Sales" binding-x="Name" binding="Sales"> <c1-items-source source-collection="@CitySaleDatas"></c1-items-source> </c1-flex-chart-series> <c1-flex-chart-axis c1-property="AxisX" binding="CountryName"> <c1-axis-groups-options c1-property="GroupsOptions" display="Show"></c1-axis-groups-options> </c1-flex-chart-axis> </c1-flex-chart> @section Description{ <h3>@Html.Raw(FlexChartRes.AxisGroups_Text01)</h3> <p>@Html.Raw(FlexChartRes.AxisGroups_Text02)</p> }
マニュアル