バージョン

チャート シリーズのスタイル設定 (XamDataChart)

トピックの概要

目的

このトピックは、 XamDataChart™ コントロールのシリーズのスタイル設定方法の概要について紹介し、例として影付きの効果をシリーズに適用する方法を紹介します。

前提条件

本トピックの理解を深めるために、以下のトピックを参照することをお勧めします。

トピック 目的

このトピックでは、XamDataChart コントロールのインスタンスを設定しデータ バインディングを作成する方法を紹介します。

このトピックは、チャート シリーズの概念を紹介し、シリーズのタイプ、シリーズ データの結合、およびシリーズの凡例についての手順を説明します。

概要

チャート シリーズのスタイル設定の概要

シリーズ XamDataChart は、複数の要素でスタイル設定できますが、異なるフィールとアウトライン ブラシをシリーズに適用することが重要な点です。これはシリーズの BrushOutline プロパティで処理されます。シリーズのルック アンド フィールのその他の要素、たとえばアウトラインの太さやシリーズの不透明度なども、シリーズの Thickness および Opacity のプロパティで構成できます。

チャート シリーズへの効果の適用

XamDataChartXamDataChart.Series コレクションに使用される Series クラスも、Control クラスから継承されるため、Effect プロパティを適用します。このプロパティは、シリーズの表示に視覚効果を適用します。以下の表は、サポートされている視覚効果と視覚効果を構成する Effect プロパティ設定をマップします。

効果の名前 外観: Effect プロパティの設定

効果なし

xamDataChart Styling the Chart Series 1.png

設定なし

ぼかし

xamDataChart Styling the Chart Series 2.png

BlurEffect

ドロップ シャドウ

xamDataChart Styling the Chart Series 3.png

DropShadowEffect

各効果は、効果のプロパティ設定を変更して構成できます。ぼかし効果は、ぼかしの半径およびぼかしの計算に使用する曲線で構成できます。影付きの効果は、影の色、その不透明度、方向、オフセット、およびぼかしを変更することによりカスタマイズできます。

影付きの効果を適用したチャート シリーズのスタイル設定

概要

影付きの効果をシリーズに適用するには、以下の 2 つの方法があります。

  • Series クラスの Effect プロパティを使用する

  • シリーズの IsDropShadowEnabled プロパティを使用する

Series クラスの Effect プロパティで、影付きの効果を適用する場合

Series クラスの Effect プロパティを、DropShadowEffect インスタンスに設定します。影付きの効果がボックスの外側に適用されます。DropShadowEffect インスタンスを更にカスタマイズすることができます。

シリーズの IsDropShadowEnabled プロパティで、影付きを適用する場合

シリーズの IsDropShadowEnabled プロパティを、"true" に設定します。ぼかしの半径、色、方向、深さ、および不透明度の変更が、効果のカスタマイズとして Series の影に関連するプロパティでサポートされています (詳細は、プロパティの設定 と例を参照してください)。

Note
注:

Effect プロパティの設定は、IsDropShadowEnabled プロパティおよびシリーズの影に関連するプロパティより優先度が高く、これらプロパティによる描画は無効になります。

デフォルト設定の影付きの効果は、シリーズのタイプによって異なります。

プロパティ設定

以下の表は、各プロパティ設定による影付きの効果 (シリーズのIsDropShadowEnabled プロパティが適用された場合) で構成できる要素を示しています。この表に示す設定内容を使用する場合は、シリーズの Effect プロパティを設定しないでください。

構成の目的: 使用するプロパティ: 設定の選択肢:

シリーズに対する影付きの効果

"true"

影の色

任意の色

シリーズ表示の影のオフセット

オフセットを示すピクセルで指定した double 値

影の方向

任意の方向の角度は、シリーズの表示からの角度が0の場合、影はまっすぐ右に、90で上端に、180でまっすぐ左にキャストされます。

影の不透明度

任意の double 値は 0~1 の範囲で、 0 は影が透明で、 1 は影が完全に不透明になります。

影の端の定義レベル (シャープ / ぼかし)

ぼかしのレベルを表す、任意のピクセルの double 値。ぼかしのレベルは、等高線の広がりやフェード アウトの全体のピクセル数で定義されます。値が大きいと、影のぼかしが強くなります。

この例では、シリーズの IsDropShadowEnabled プロパティによる影付きの効果を示します。以下のスクリーンショットは、以下の影の設定の結果、 XamDataChart コントロールの外観がどのようになるか示しています。

プロパティ

"true"

20

DarkBlue

15

90

0.8

xamDataChart Styling the Chart Series 3.png

以下は、折れ線チャート シリーズの影に関連するプロパティを設定する場合のコード スニペットです。

XAML の場合:

…
<ig:LineSeries IsDropShadowEnabled="True"
               ShadowBlur="20"
               ShadowColor="DarkBlue"
               ShadowDepth="15"
               ShadowDirection="90"
               ShadowOpacity="0.8"
               Thickness="5"
               …
>
…

Visual Basic の場合:

…
Dim lineSeries = New LineSeries()
lineSeries.IsDropShadowEnabled = True
lineSeries.ShadowBlur = 20
lineSeries.ShadowColor = new SolidColorBrush("DarkBlue")
lineSeries.ShadowDepth = 15
lineSeries.ShadowDirection = 90
lineSeries.ShadowOpacity = 0.8
lineSeries.Thickness = 5
…

C# の場合:

…
LineSeries lineSeries = New LineSeries();
lineSeries.IsDropShadowEnabled = True;
lineSeries.ShadowBlur = 20;
lineSeries.ShadowColor = new SolidColorBrush("DarkBlue");
lineSeries.ShadowDepth = 15;
lineSeries.ShadowDirection = 90;
lineSeries.ShadowOpacity = 0.8;
lineSeries.Thickness = 5;
…

関連コンテンツ

以下の資料 (Infragistics のコンテンツ ファミリー以外でもご利用いただけます) は、このトピックに関連する追加情報を提供します。

リソース 目的

目標のテクスチャの周囲にドロップ シャドウを描画するビットマップの効果