FlexChart Palettes
The FlexChart automatically picks colors for each series based on a default palette, which you can override by setting the palette property.
1 2 3 4 5 6 7 8 9 10 | // This file locates: "Scripts/Lesson/C1FlexChart/Palettes.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); var thePalette = wijmo.Control.getControl( '#thePalette' ); thePalette.selectedIndexChanged.addHandler(function (s, e) { var pal = s.text.toLowerCase(); theChart.palette = wijmo.chart.Palettes[pal]; }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: Palettes public ActionResult Palettes() { return View(Models.FlexChartData.GetSales1()); } } } |
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 | @using LearnMvcClient.Models @model IEnumerable< FlexChartData.Sale > @ { var palettes = new [] { "Standard" , "Cocoa" , "Coral" , "Dark" , "HighContrast" , "Light" , "Midnight" , "Modern" , "Organic" , "Slate" , "Zen" , "Cyborg" , "Superhero" , "Flatly" , "Darkly" , "Cerulan" }; } < h1 > @Html .Raw(Resources.C1FlexChart.Palettes_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.Palettes_Text1) </ p > < div class = "demo-settings" > < label > @Html .Raw(Resources.C1FlexChart.Palettes_Text2)</ label > @Html .C1().ComboBox().Id( "thePalette" ).Bind(palettes) </ div > @ (Html.C1().FlexChart< FlexChartData.Sale >().Id( "theChart" ) .Bind( "Country" , Model) .Series(sb => { sb.Add().Binding( "Sales" ).Name( "Sales" ); sb.Add().Binding( "Expenses" ).Name( "Expenses" ); sb.Add().Binding( "Downloads" ).Name( "Downloads" ); }) ) |