FlexChart
FlexChart
概要
機能
サンプル
設定
説明
このビューでは、FlexChart コントロールの基本機能を示します。チャートをモデルに連結し、 ユーザーがチャートタイプ、系列の積み上げ、および回転を選択できるようにします。
マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。
FlexChart を使用する最も単純な方法は、次のとおりです。
- FlexChart を IEnumerable DataSource に連結します。
- チャートの BindingX プロパティを、 X 値(この例ではフルーツ名)を含むプロパティの名前に設定すると、 チャートの ItemsSource のフィールドがマップされます。
- 1 つ以上の Series オブジェクトをチャートの Series 配列に追加して、 その Binding プロパティを、 Y 値(この例では、March、April、May などの月)を含むプロパティの名前に設定します。
LegendOrientationを使用して、凡例の方向を決定します。
Legend.MaxSizeを使用して、凡例の最大サイズ(左または右の位置の幅と上または下の位置の高さ)を取得または設定します。サイズはピクセル単位(例、maxSize = '100px')またはパーセント単位(例、maxSize = '50%')で指定できます。
ソース
IndexController.cs
using System.Collections.Generic;
using System.Web.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc.Chart;
namespace MvcExplorer.Controllers
{
public partial class FlexChartController : Controller
{
public ActionResult Index()
{
var data = new ClientSettingsModel
{
Settings = CreateIndexSettings(),
DefaultValues = GetIndexDefaultValues()
};
data.LoadRequestData(Request);
ViewBag.DemoSettingsModel = data;
ViewBag.Palettes = GetPalettes();
return View(Fruit.GetFruitsSales());
}
private static IDictionary<string, object[]> CreateIndexSettings()
{
var settings = new Dictionary<string, object[]>
{
{"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
{"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
{"Rotated", new object[]{false, true}},
{"GroupWidth", new object[]{"25%", "70%", "100%", "50 pixels"}},
{"LegendOrientation", new object[]{ "Auto", "Vertical", "Horizontal"}},
{"TooltipPosition", new object[]{
"Above",
"AboveRight",
"RightTop",
"Right",
"RightBottom",
"BelowRight",
"Below",
"BelowLeft",
"LeftBottom",
"Left",
"LeftTop",
"AboveLeft"
}},
{"MaxSize", new object[] {"50px", "10%", "100%", "20px", "0.5%", "50%", "100px" } }
};
return settings;
}
private static IDictionary<string, object> GetIndexDefaultValues()
{
var defaultValues = new Dictionary<string, object>
{
{"GroupWidth", "70%"}
};
return defaultValues;
}
private object[] GetPalettes()
{
return new object[] {
new {Header = "Standard", Value = Palettes.Standard},
new {Header = "Cocoa", Value = Palettes.Cocoa},
new {Header = "Coral", Value = Palettes.Coral},
new {Header = "Dark", Value = Palettes.Dark},
new {Header = "Highcontrast", Value = Palettes.Highcontrast},
new {Header = "Light", Value = Palettes.Light},
new {Header = "Midnight", Value = Palettes.Midnight},
new {Header = "Minimal", Value = Palettes.Minimal},
new {Header = "Modern", Value = Palettes.Modern },
new {Header = "Organic", Value = Palettes.Organic },
new {Header = "Slate", Value = Palettes.Slate },
new {
Header = "Qualitative",
Items = new object[]
{
new {Header = "Accent", GroupName = "Qualitative", Value = Palettes.Qualitative.Accent},
new {Header = "Dark2", GroupName = "Qualitative", Value = Palettes.Qualitative.Dark2},
new {Header = "Paired", GroupName = "Qualitative", Value = Palettes.Qualitative.Paired},
new {Header = "Pastel1", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel1},
new {Header = "Pastel2", GroupName = "Qualitative", Value = Palettes.Qualitative.Pastel2},
new {Header = "Set1", GroupName = "Qualitative", Value = Palettes.Qualitative.Set1},
new {Header = "Set2", GroupName = "Qualitative", Value = Palettes.Qualitative.Set2},
new {Header = "Set3", GroupName = "Qualitative", Value = Palettes.Qualitative.Set3},
}
},
new {
Header = "Diverging",
Items = new object[]
{
new {Header = "BrBG", GroupName = "Diverging", Value = Palettes.Diverging.BrBG},
new {Header = "PiYG", GroupName = "Diverging", Value = Palettes.Diverging.PiYG},
new {Header = "PRGn", GroupName = "Diverging", Value = Palettes.Diverging.PRGn},
new {Header = "PuOr", GroupName = "Diverging", Value = Palettes.Diverging.PuOr},
new {Header = "RdBu", GroupName = "Diverging", Value = Palettes.Diverging.RdBu},
new {Header = "RdGy", GroupName = "Diverging", Value = Palettes.Diverging.RdGy},
new {Header = "RdYlBu", GroupName = "Diverging", Value = Palettes.Diverging.RdYlBu},
new {Header = "RdYlGn", GroupName = "Diverging", Value = Palettes.Diverging.RdYlGn},
new {Header = "Spectral",GroupName = "Diverging", Value = Palettes.Diverging.Spectral},
}
},
new {
Header = "SequentialSingle",
Items = new object[]
{
new {Header = "Blues", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Blues},
new {Header = "Greens",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greens},
new {Header = "Greys",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Greys},
new {Header = "Oranges",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Oranges},
new {Header = "Purples", GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Purples},
new {Header = "Reds",GroupName = "SequentialSingle", Value= Palettes.SequentialSingle.Reds},
}
},
new {
Header = "SequentialMulti",
Items = new object[]
{
new { Header = "BuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuGn},
new {Header = "BuPu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.BuPu},
new {Header = "GnBu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.GnBu},
new {Header = "OrRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.OrRd},
new {Header = "PuBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBu},
new {Header = "PuBuGn", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuBuGn},
new {Header = "PuRd", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.PuRd},
new {Header = "RdPu",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.RdPu},
new {Header = "YlGn",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGn},
new {Header = "YlGnBu", GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlGnBu},
new {Header = "YlOrBr",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrBr},
new {Header = "YlOrRd",GroupName = "SequentialMulti", Value= Palettes.SequentialMulti.YlOrRd}
}
}
};
}
}
}
Index.cshtml
@model IEnumerable<Fruit>
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
object[] palettesModel = ViewBag.Palettes;
}
@functions{
public C1.Web.Mvc.Chart.Stacking GetStacking(ClientSettingsModel settings)
{
return settings.GetEnum("Stacking", C1.Web.Mvc.Chart.Stacking.None, (stacking) =>
{
return string.Equals(stacking, "Stacked 100%", StringComparison.OrdinalIgnoreCase)
? "Stacked100pc"
: stacking;
});
}
}
<div id="flexChart"></div>
@(Html.C1().FlexChart().Id(demoSettingsModel.ControlId)
.ChartType(demoSettingsModel.GetEnum("ChartType", C1.Web.Mvc.Chart.ChartType.Column))
.Stacking(GetStacking(demoSettingsModel))
.Rotated(demoSettingsModel.GetBool("Rotated", false))
.Bind(Model).BindingX("Name").Series(sers =>
{
sers.Add().Binding("MarPrice").Name("March");
sers.Add().Binding("AprPrice").Name("April");
sers.Add().Binding("MayPrice").Name("May");
})
.Legend(C1.Web.Mvc.Chart.Position.Bottom)
.Legend(demoSettingsModel.GetEnum("LegendOrientation", C1.Web.Mvc.Chart.LegendOrientation.Auto))
.Palette(C1.Web.Mvc.Chart.Palettes.Standard)
)
@section Scripts{
<script type="text/javascript">
convertStacking = function (value) {
return value === "Stacked 100%" ? "Stacked100pc" : value;
};
updateGroupWidth = function (control, value) {
control.options = { groupWidth: value === "50 pixels" ? 50 : value };
};
customChangeLegendOrientation = function (control, value) {
control.legend.orientation = value;
};
function customChangeTooltipPosition(control, value) {
control.tooltip.position = value;
}
function customChangeMaxSize(control, value) {
control.legend.maxSize = value;
}
function itemPaletteClicked(sender) {
if (sender.selectedItem) {
let flexPie = wijmo.Control.getControl("#@(demoSettingsModel.ControlId)")
if (flexPie) {
flexPie.palette = sender.selectedItem.Value;
flexPie.invalidate();
}
let menu = wijmo.Control.getControl("#paletteMenu");
if (sender.selectedItem.GroupName && sender.selectedItem.GroupName.length) {
menu.header = "Palette: <b>" + sender.selectedItem.GroupName + "." + sender.selectedItem.Header+ "<b/>";
}
else {
menu.header = "Palette: <b>" + sender.selectedItem.Header + "<b/>";
}
sender.invalidate();
}
}
</script>
}
@section Settings{
@(Html.C1().Menu().Id("paletteMenu").Bind(palettesModel)
.Header("Palette: <b>Standard</b>")
.ShowDropDownButton(true)
.CloseOnLeave(true)
.SubItemsPath("Items")
.OnClientItemClicked("itemPaletteClicked")
)
}
@section Description{
<p>@Html.Raw(Resources.FlexChart.Index_Text0)</p>
<p>@Html.Raw(Resources.FlexChart.Index_Text1)</p>
<p>@Html.Raw(Resources.FlexChart.Index_Text2)</p>
<ol>
<li>@Html.Raw(Resources.FlexChart.Index_Li1)</li>
<li>@Html.Raw(Resources.FlexChart.Index_Li2)</li>
<li>@Html.Raw(Resources.FlexChart.Index_Li3)</li>
</ol>
<p>@Html.Raw(Resources.FlexChart.Index_Text3)</p>
<p>@Html.Raw(Resources.FlexChart.Index_Text4)</p>
}
マニュアル