グラデーションは、1つの色を別の色にブレンドすることで立体感のある色の表現を生み出すグラフィック効果です。複数の色を使用して、1つの色を徐々に薄くして別の色に変化させることができます。グラデーションはブラウザの機能を利用して生成されるため、グラデーション色を使用した要素やコントロールは綺麗に表示されます。FlexChartでは、スタイル設定にグラデーション色を適用してチャートの見栄えをよくすることができます。
グラデーションのディスクリプタは、次のように書式設定された式です。
HTML |
コードのコピー
|
---|---|
<type>(<coords>)<colors>[:<offset>[:<opacity>]][-<colors>[:<offset>[:<opacity>]]]-<colors>[:<offset>[:<opacity>]] |
グラデーションのディスクリプタには、次の要素が含まれます。
直線グラデーションと放射状グラデーションの例を次に示します。
Linear Gradient Format |
コードのコピー
|
---|---|
'l(0,0,1,0)#ff0000-#00ff00-#0000ff', 'L(0,0,300,300)#ff0000:0.2:0.2-00ff00:0.8' |
Radial Gradient Format |
コードのコピー
|
---|---|
'r(0.5,0.5,1)#ff0000-#0000ff', 'R(100,100,100,200,200,200)#ff0000-#0000ff' |
次のコード例は、FlexChartでグラデーション色を追加する方法を示します。この例では、「FlexChart: クイックスタート」セクションで作成したFruit.csモデルを使用しています。
Razor |
コードのコピー
|
---|---|
@using ChartGradient.Models @model IEnumerable<Fruit> @using C1.Web.Mvc.Chart @(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)#30cfd0-#330867")); })) |