FlexPie
Overview
This view shows the FlexPie's basic features.
Features
Settings
Inner Radius: 0
Offset: 0
Start Angle: 0
Reversed: False
Palette: standard
Data Label Position: Center
Data Label Border: False
Description
This view shows the FlexPie's basic features. It binds the chart to a data model.
If you move the mouse over a chart element, a tooltip will appear showing details about the data point.
If you select InnerRadius greater than 0 then the InnerText will appears inside center of the pie instead of Header text at the top and it's styled by InnerTextStyle.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | using System.Collections.Generic;using System.Web.Mvc;using C1.Web.Mvc.Chart;using MvcExplorer.Models;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; 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}}, {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}, {"DataLabel.Position", new object[]{PieLabelPosition.None, PieLabelPosition.Inside, PieLabelPosition.Center, PieLabelPosition.Outside}}, {"DataLabel.Border", new object[]{false, true}}, }; return settings; } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | @model IEnumerable<CustomerOrder>@{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;}@(Html.C1().FlexPie<CustomerOrder>().Id(demoSettingsModel.ControlId) .InnerRadius(demoSettingsModel.GetFloat("InnerRadius", 0f)) .Header("Sales").Bind("Country", "Count", Model).DataLabel(dl=>dl.Content("{value}")) .InnerText("") .InnerTextStyle(svgb => svgb.FontSize(28).FontWeight("400").Fill("#2244ff").Stroke("#0099ff").StrokeWidth(1).StrokeOpacity(0.6)))@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 = ""; } }</script>}@section Description{ <p>@Html.Raw(Resources.FlexPie.Index_Text0)</p> <p>@Html.Raw(Resources.FlexPie.Index_Text1)</p> <p>@Html.Raw(Resources.FlexPie.Index_Text2)</p>} |