FlexChart
FlexChart
Gradients
This example shows how to specify gradients for series style properties.
Features
Settings
Fill: Light Blue - l(0,0,1,0)#89f7fe-#66a6ff
Description
The FlexChart supports gradient colors.
The gradient descriptor is an expression formatted as follows:
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]]
The <type> can be either linear or radial. The uppercase L or R letters indicate absolute coordinates offset from the SVG surface. Lowercase l or r letters indicate coordinates calculated relative to the element to which the gradient is applied.
The <coords> specify a linear gradient vector as x1, y1, x2, y2, or a radial gradient as cx, cy, r and optional fx, fy, fr specifying a focal point away from the center of the circle.
Specify <colors> as a list of dash-separated CSS color values. Each color may be followed by a custom offset and opacity value, separated with a colon character.
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
Linear gradient format example:
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
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 | using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Mvc;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class FlexChartController { public ActionResult Gradients() { ViewBag.DemoSettingsModel = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Fill", new object[]{ "Light Blue - l(0,0,1,0)#89f7fe-#66a6ff", "Aqua - l(0,0,0,1)#13547a-#80d0c7", "Red - l(0, 0, 1, 1)#ff0844-#ffb199", "Purple - l(0, 0, 1, 0)#b224ef-#7579ff-#b224ef", "Plum - r(0.5,0.5,0.7)#cc208e-#6713d2", "Deep Blue - l(0, 0, 1, 0)#30cfd0-#330867", "Orange - l(0, 0, 0, 1)#e27f00-#ae1a73", "Green - l(0, 0, 1, 1)#abd800-#5c7e00" } } } }; return View(Fruit.GetFruitsSales()); } }} |
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 43 44 45 46 47 48 49 50 51 52 53 54 55 | @model IEnumerable<Fruit>@using C1.Web.Mvc.Chart@{ ViewBag.DemoSettings = true;}@section Scripts{ <script> var chart, series; c1.documentReady(function () { chart = wijmo.Control.getControl('#chartGradients'); series = chart.series[0]; }); function customChangeFill(control, value) { series.style.fill = value.substr(value.indexOf('-') + 2); chart.refresh(); } </script>}@(Html.C1().FlexChart().Id("chartGradients") .ChartType(ChartType.Column) .Bind(Model) .BindingX("Name").Legend(Position.None) .DataLabel(label => { label.Content("{y}"); }) .Series(ser => { ser.Add().Name("March").Binding("MarPrice").Style(s => s.Stroke("darkred").StrokeWidth(1).Fill("l(0,0,1,0)#89f7fe-#66a6ff")); }))@section Summary{ @Html.Raw(Resources.FlexChart.Gradients_Text7)}@section Description{ <p>@Html.Raw(Resources.FlexChart.Gradients_Text0)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text1)</p> <pre> <type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]] </pre> <p>@Html.Raw(Resources.FlexChart.Gradients_Text2)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text3)</p> <p>@Html.Raw(Resources.FlexChart.Gradients_Text4)</p> <pre> 'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8' </pre> <p>@Html.Raw(Resources.FlexChart.Gradients_Text5)</p> <pre> 'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff' </pre>} |