FlexChart
FlexChart
グラデーション
この例では、系列スタイルプロパティにグラデーションを指定する方法を示します。
機能
サンプル
設定
説明
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 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());
}
}
}
Gradients.cshtml
@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>
}
マニュアル