FlexChart
FlexChart
選択
機能
サンプル
設定
説明
このビューは、FlexChart の選択機能を示します。
SelectionMode プロパティは、ユーザーがチャートをクリックしたときに、 系列とポイントのどちらが選択されるかを決定します。
メモ:このサンプルでは、サーバー側から FlexChart のプロパティを変更します
ソース
SelectionController.cs
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; 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(); } @(Html.C1().FlexChart().Bind("Name", fruits).ChartType(Model.CType).Stacking(Model.CStack).SelectionMode(Model.CSelectionMode).Series(sers => { sers.Add().Binding("MarPrice").Name("March"); sers.Add().Binding("AprPrice").Name("April"); sers.Add().Binding("MayPrice").Name("May"); })) @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{ @using (Html.BeginForm()) { @Html.ValidationSummary(true) <span>@Html.Raw(Resources.FlexChart.Selection_ChartType)</span> @(Html.C1().ComboBox().Id("chartType").Name("type").Width(130) .Bind(ChartOptions.ChartTypes).OnClientSelectedIndexChanged("postMethod0")) <span>@Html.Raw(Resources.FlexChart.Selection_Stacking)</span> @(Html.C1().ComboBox().Id("stacking").Name("stack").Width(130) .Bind(ChartOptions.Stackings).OnClientSelectedIndexChanged("postMethod1")) <span>@Html.Raw(Resources.FlexChart.Selection_SelectionMode)</span> @(Html.C1().ComboBox().Id("selection").Name("selectionmode").Width(130) .Bind(ChartOptions.SelectionModes).OnClientSelectedIndexChanged("postMethod2")) } } @section Description{ <p>@Html.Raw(Resources.FlexChart.Selection_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Selection_Text1)</p> <p>@Html.Raw(Resources.FlexChart.Selection_Text2)</p> }
マニュアル