FlexChart
FlexChart
選択
機能
サンプル
設定
説明
このビューは、FlexChart の選択機能を示します。
SelectionMode プロパティは、ユーザーがチャートをクリックしたときに、 系列とポイントのどちらが選択されるかを決定します。
メモ:このサンプルでは、サーバー側から FlexChart のプロパティを変更します
ソース
SelectionController.cs
using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { public ActionResult Selection() { ChartOptions opts = new ChartOptions(); ViewBag.typeIndex = 0; ViewBag.stackIndex = 0; ViewBag.selectionIndex = 1; return View(opts); } [HttpPost] public ActionResult Selection(ChartOptions opts) { ViewBag.typeIndex = ChartOptions.ChartTypes.IndexOf(opts.type); ViewBag.stackIndex = ChartOptions.Stackings.IndexOf(opts.stack); ViewBag.selectionIndex = ChartOptions.SelectionModes.IndexOf(opts.selectionmode); return View(opts); } } }
Selection.cshtml
@model ChartOptions @{ ViewBag.DemoSettings = true; IEnumerable<Fruit> fruits = Fruit.GetFruitsSales(); } <c1-flex-chart binding-x="Name" chart-type="@Model.CType" stacking="@Model.CStack" selection-mode="@Model.CSelectionMode"> <c1-items-source source-collection="fruits"></c1-items-source> <c1-flex-chart-series binding="MarPrice" name="March"></c1-flex-chart-series> <c1-flex-chart-series binding="AprPrice" name="April"></c1-flex-chart-series> <c1-flex-chart-series binding="MayPrice" name="May"></c1-flex-chart-series> </c1-flex-chart> @section Scripts{ <script type="text/javascript"> var indexes = [@ViewBag.typeIndex, @ViewBag.stackIndex, @ViewBag.selectionIndex], isDocumentReady = false; submit = function (combo, comboIndex) { if (!isDocumentReady) { return; } var form = document.forms ? document.forms[0] : null; if (form && combo.selectedIndex != indexes[comboIndex]) { form.submit(); } }; postMethod0 = function (combo) { submit(combo, 0); }; postMethod1 = function (combo) { submit(combo, 1); }; postMethod2 = function (combo) { submit(combo, 2); }; c1.documentReady(function () { wijmo.Control.getControl("#chartType").selectedIndex = indexes[0]; wijmo.Control.getControl("#stacking").selectedIndex = indexes[1]; wijmo.Control.getControl("#selection").selectedIndex = indexes[2]; isDocumentReady = true; }); </script> } @section Settings{ <form method="post"> <span>@Html.Raw(FlexChartRes.Selection_ChartType)</span> <c1-combo-box id="chartType" name="type" selected-index-changed="postMethod0" style="width: 130px"> <c1-items-source source-collection="ChartOptions.ChartTypes"></c1-items-source> </c1-combo-box> <span>@Html.Raw(FlexChartRes.Selection_Stacking)</span> <c1-combo-box id="stacking" name="stack" selected-index-changed="postMethod1" style="width: 130px"> <c1-items-source source-collection="ChartOptions.Stackings"></c1-items-source> </c1-combo-box> <span>@Html.Raw(FlexChartRes.Selection_SelectionMode)</span> <c1-combo-box name="selectionmode" id="selection" selected-index-changed="postMethod2" style="width: 130px"> <c1-items-source source-collection="ChartOptions.SelectionModes"></c1-items-source> </c1-combo-box> </form> } @section Description{ <p>@Html.Raw(FlexChartRes.Selection_Text0)</p> <p>@Html.Raw(FlexChartRes.Selection_Text1)</p> <p>@Html.Raw(FlexChartRes.Selection_Text2)</p> }
マニュアル