FlexPie
概要
機能
サンプル
設定
説明
このビューは、FlexPie の基本機能を示します。これは、チャートをデータモデルに連結します。
マウスをチャート要素の上に移動すると、そのデータポイントの詳細を示すツールチップが表示されます。
InnerRadius プロパティをゼロより大きい値に設定すると、円グラフの中央に穴が開き、InnerTextがヘッダテキストではなく円グラフの中央に表示されます。円グラフ内のテキストのスタイルを設定するには、InnerTextStyleプロパティを使用します。
ソース
IndexController.cs
using MvcExplorer.Models;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using C1.Web.Mvc.Chart;
namespace MvcExplorer.Controllers
{
public partial class FlexPieController : Controller
{
public ActionResult Index()
{
var settings = new ClientSettingsModel
{
Settings = CreateSettings(),
DefaultValues = new Dictionary<string, object>
{
{"DataLabel.Position", PieLabelPosition.Center}
}
};
settings.LoadRequestData(Request);
ViewBag.DemoSettingsModel = settings;
ViewBag.Palettes = GetPalettes();
return View(CustomerOrder.GetCountryGroupOrderData());
}
private static IDictionary<string, object[]> CreateSettings()
{
var settings = new Dictionary<string, object[]>
{
{"InnerRadius", new object[]{0, 0.25, 0.5, 0.75}},
{"Offset", new object[]{0, 0.1, 0.2, 0.3, 0.4, 0.5}},
{"StartAngle", new object[]{0, 90, 180, -90}},
{"Reversed", new object[]{false, true}},
{"DataLabel.Position", new object[]{PieLabelPosition.None, PieLabelPosition.Inside, PieLabelPosition.Center, PieLabelPosition.Outside, PieLabelPosition.Radial, PieLabelPosition.Circular}},
{"DataLabel.Border", new object[]{false, true}},
};
return settings;
}
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
@{
ViewBag.DemoSettings = true;
ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
var innerRadius = demoSettingsModel.GetFloat("InnerRadius", 0f);
var innerTextStyle = new SVGStyle { FontSize = 28, FontWeight = "400", Fill = "#2244ff", Stroke = "#0099ff", StrokeWidth = 1, StrokeOpacity = 0.6 };
object[] palettesModel = ViewBag.Palettes;
}
<c1-flex-pie id="@demoSettingsModel.ControlId" header="Sales" inner-radius="@innerRadius" inner-text="" inner-text-style="innerTextStyle"
binding-name="Country" binding="Count">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-pie-datalabel content="{value}"></c1-flex-pie-datalabel>
</c1-flex-pie>
@section Settings{
<br />
<c1-menu id="paletteMenu" header="Palette: <b>Standard</b>" show-drop-down-button="true" sub-items-path="Items" item-clicked="itemPaletteClicked">
<c1-items-source source-collection="@palettesModel"></c1-items-source>
</c1-menu>
}
@section Scripts{
<script>
function convertPalette(value) {
return wijmo.chart.Palettes[value];
}
function customChangeInnerRadius(control, value) {
control.innerRadius = (typeof convertInnerRadius === 'undefined' ? value : convertInnerRadius(value));
if (value > 0) {
if (control.header != "") {
control.innerText = control.header;
control.header = "";
}
} else {
control.header = control.innerText;
control.innerText = "";
}
}
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 Description{
<p>@Html.Raw(FlexPieRes.Index_Text0)</p>
<p>@Html.Raw(FlexPieRes.Index_Text1)</p>
<p>@Html.Raw(FlexPieRes.Index_Text2)</p>
}
マニュアル