FlexChart
Gradients
Features
Settings
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.
Linear gradient format example:
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
Radial 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 | using System; using MvcExplorer.Models; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { 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 56 57 | @model IEnumerable<Fruit> @{ ViewBag.DemoSettings = true; var marStyle = new SVGStyle { Stroke = "darkred", StrokeWidth = 1, Fill = "l(0,0,1,0)#89f7fe-#66a6ff" }; } @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>} <c1-flex-chart id="chartGradients" binding-x="Name" chart-type="Column" legend-position="None"> <c1-flex-chart-datalabel content="{y}" /> <c1-items-source source-collection="Model" /> <c1-flex-chart-series name="March" binding="MarPrice" style="@marStyle"></c1-flex-chart-series> </c1-flex-chart> @section Summary{ This example shows how to specify gradients for series style properties. } @section Description{ <p>@Html.Raw(FlexChartRes.Gradients_Text0)</p> <p>@Html.Raw(FlexChartRes.Gradients_Text1)</p> <pre> <type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]] </pre> <p>@Html.Raw(FlexChartRes.Gradients_Text6)</p> <p>@Html.Raw(FlexChartRes.Gradients_Text2)</p> <p>@Html.Raw(FlexChartRes.Gradients_Text3)</p> <p>@Html.Raw(FlexChartRes.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(FlexChartRes.Gradients_Text5)</p> <pre> 'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff' </pre> } |