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 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; 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 36 37 | @ { 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 }; } < 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 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(FlexPieRes.Index_Text0)</ p > < p > @Html .Raw(FlexPieRes.Index_Text1)</ p > < p > @Html .Raw(FlexPieRes.Index_Text2)</ p > } |