FlexChart
FlexChart
グラデーション
This example shows how to specify gradients for series style properties.
機能
サンプル
設定
説明
FlexChart は、グラデーション色をサポートします。
グラデーションのディスクリプタは、次のように書式設定された式です。
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]]
<type> は、線形または円形にすることができます。 大文字の L または R は、SVG サーフェスからの絶対座標オフセットを示します。 小文字の l または r は、グラデーションが適用される要素を基準にして計算される座標を示します。
<coords> は、直線グラデーションベクトルを「x1, y1, x2, y2」で指定します。または、放射状グラデーションを「cx, cy, r」で指定し、オプションで円の中心から離れた焦点を「fx, fy, fr」で指定します。
<colors> は、ダッシュで区切られた CSS カラー値のリストを指定します。各色の後に、カスタムのオフセットと不透明度の値をコロン文字で区切って指定することができます。
直線グラデーション形式の例：
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8'
放射状グラデーション形式の例：
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff'
ソース
GradientsController.cs
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());
}
}
}
Gradients.cshtml
@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>
}
マニュアル