注釈は、テキスト、画像、図形などのユーザー定義のオブジェクトです。これをチャートに追加することで、審美性を高めつつ、情報量を増すことができます。一般に、注釈内の情報は、チャートを見る者に理解を深めてもらうために追加されます。

注釈の追加

FlexChart では、チャートをさらに魅力的かつ有益なものにするために、C1.Win.Chart.Annotation 名前空間を介して次の 8 種類の注釈を提供します。この名前空間には、各注釈に対応するクラスが用意されており、サイズを設定するためのプロパティなどがあります。注釈クラスによって提供されるプロパティを使用して、注釈の位置やスタイルを設定することもできます。さらに、クラスの TooltipText プロパティを使用して、ツールチップの形式で注釈に追加の情報を与えることもできます。

注釈のタイプ	説明
Line	Start および End プロパティを使用して端点が指定される直線です。線注釈の上にテキストをレンダリングする Content プロパティも提供します。
Circle	プロット領域に丸い図形をレンダリングします。半径は Radius プロパティを使用して指定されます。クラスにある Content プロパティを使用して、この注釈の内部にテキストを描画します。
Ellipse	チャートに楕円形を追加します。サイズは Height および Width プロパティを使用して定義されます。他の閉じた図形と同様に、この注釈の内部には Content プロパティを使用してテキストをレンダリングできます。
Rectangle	チャートのプロット領域に、指定された高さと幅を持つ四角形を作成します。また、Content プロパティにより、この注釈の内部にテキストを追加できます。
Square	プロット領域に正方形を描画します。辺の長さは Length プロパティによって定義されます。他の閉じた図形と同様に、この注釈の内部には Content プロパティを使用してテキストをレンダリングできます。
Polygon	多角形を追加します。この多角形の頂点は、頂点ポイントのコレクションを受け取る Points プロパティによって追加できます。このクラスは ContentCenter プロパティも提供し、Contentプロパティを介して追加されるテキストの中心を指定します。
Image	プロット領域に画像をレンダリングして、素晴らしい視覚的インパクトを与えます。画像のソースは SourceImage プロパティを介して指定し、画像のサイズは Height および Width プロパティを使用して調整します。画像注釈は、ツールチップを使用して、さらに情報量を増やすことができます。
Text	追加の情報をテキストの形式で描画します。これは Content プロパティを介して指定されます。

注釈の追加

チャートに注釈を追加するには、 AnnotationLayer クラスを使用して注釈レイヤを作成し、この注釈レイヤの Annotations コレクションに注釈を追加します。

// AnnotationLayerクラスを使用して注釈レイヤを作成します
C1.Win.Chart.Annotation.AnnotationLayer annotationLayer = new C1.Win.Chart.Annotation.AnnotationLayer(flexChart1);

//手段1: 注釈のインスタンスの作成

// 四角形の注釈を作成します
C1.Win.Chart.Annotation.Rectangle rect = new C1.Win.Chart.Annotation.Rectangle("Maximum Sales\n\n$8675");
// 画像注釈を作成します
C1.Win.Chart.Annotation.Image img = new C1.Win.Chart.Annotation.Image();
// 線注釈のインスタンスを作成します
C1.Win.Chart.Annotation.Text text = new C1.Win.Chart.Annotation.Text();


//手段2: 注釈のタイプに明示的なプロパティの設定
            
// 画像注釈のソース画像を設定します
img.SourceImage = Image.FromFile("Resources/C1.png");

// テキスト注釈の内容を指定します
text.Content = "Minimum Revenue ever generated";


//手段3: 注釈のサイズの指定

// 注釈の寸法を指定します
rect.Height = 50;
rect.Width = 140;
img.Height = 50;
img.Width = 50;


//手段4: 注釈インスタンスを注釈レイヤに追加

// 注釈レイヤの注釈コレクションに注釈を追加します
annotationLayer.Annotations.Add(rect);
annotationLayer.Annotations.Add(img);
annotationLayer.Annotations.Add(text);

' AnnotationLayerクラスを使用して注釈レイヤを作成します
Dim annotationLayer As New C1.Win.Chart.Annotation.AnnotationLayer(flexChart1)

'手段1: 注釈のインスタンスの作成

' 四角形の注釈を作成します
Dim rect As New C1.Win.Chart.Annotation.Rectangle("Maximum Sales" & vbLf & vbLf & "$8675")
' 画像注釈を作成します
Dim img As New C1.Win.Chart.Annotation.Image()
' 線注釈のインスタンスを作成します
Dim text As New C1.Win.Chart.Annotation.Text()


'手段2: 注釈のタイプに明示的なプロパティの設定

' 画像注釈のソース画像を設定します
img.SourceImage = Image.FromFile("Resources/C1.png")

' テキスト注釈の内容を指定します
text.Content = "Minimum Revenue ever generated"

'手段3: 注釈のサイズの指定

' 注釈の寸法を指定します
rect.Height = 50
rect.Width = 140
img.Height = 50
img.Width = 50


'手段4: 注釈インスタンスを注釈レイヤに追加

' 注釈レイヤの注釈コレクションに注釈を追加します
annotationLayer.Annotations.Add(rect)
annotationLayer.Annotations.Add(img)
annotationLayer.Annotations.Add(text)

注釈の配置

チャート内の注釈の位置を決定する要素は 2 つあります。1 つはデータポイントに対する注釈の位置、もう 1 つは注釈をチャートにどのようにアタッチするか（チャートに対する注釈の位置）です。Position プロパティを設定することで、注釈をデータポイントの左、右、上、または下に表示できます。このプロパティは AnnotationPosition 列挙に含まれる値を受け取ります。

注釈をチャートに対して配置するために、FlexChart は Attachment プロパティを用意しています。このプロパティは、AnnotationAttachment 列挙に含まれる次の値を受け取ります。

Attachment プロパティの値	説明
Absolute	アプリケーションのサイズ変更にかかわらず、注釈は固定されたままになります。この場合、注釈の位置はピクセル単位で指定されます。
DataCoordinate	注釈は特定のデータポイントにアタッチされます。この場合、注釈の位置は Location プロパティでデータ座標を指定することによって定義されます。
DataIndex	注釈は、SeriesIndex プロパティの値に従って系列にアタッチされ、PointIndex プロパティが指定する値に従ってポイントにアタッチされます。
Relative	注釈は、チャートに対する位置とサイズをそのまま保持します。この場合、注釈の位置は Location プロパティを使用して定義できます。ここで、(0,0) 座標はチャートの左上隅を表し、(1,1) は右下隅を表します。

// 注釈の配置方法を指定します
rect.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataIndex;
img.Attachment = C1.Chart.Annotation.AnnotationAttachment.Relative;
text.Attachment = C1.Chart.Annotation.AnnotationAttachment.Absolute;

// 系列とデータポイントに従って注釈の位置を設定します
rect.SeriesIndex = 0;
rect.PointIndex = 7;

// 注釈の場所を設定します
img.Location = new PointF(1.05f, 0.28f);
text.Location = new PointF(100F, 325F);

// 注釈の位置を指定します
rect.Position = C1.Chart.Annotation.AnnotationPosition.Bottom;
img.Position = C1.Chart.Annotation.AnnotationPosition.Center;
text.Position = C1.Chart.Annotation.AnnotationPosition.Top;

' 注釈の配置方法を指定します
rect.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataIndex
img.Attachment = C1.Chart.Annotation.AnnotationAttachment.Relative
text.Attachment = C1.Chart.Annotation.AnnotationAttachment.Absolute

' 系列とデータポイントに従って注釈の位置を設定します
rect.SeriesIndex = 0
rect.PointIndex = 6

' 注釈の場所を設定します
img.Location = New PointF(1.05F, 0.28F)
text.Location = New PointF(100F, 325F)

' 注釈の位置を指定します
rect.Position = C1.Chart.Annotation.AnnotationPosition.Bottom
img.Position = C1.Chart.Annotation.AnnotationPosition.Center
text.Position = C1.Chart.Annotation.AnnotationPosition.Top

注釈のスタイル設定

FlexChart には、チャートの背景に対して目立つように注釈をカスタマイズできるさまざまなプロパティが用意されています。関連する注釈クラスから提供されるサイズ関連のプロパティとは別に、これらのクラスでも Style および ContentStyle プロパティを提供し、注釈とそのコンテンツをそれぞれカスタマイズできます。

// 注釈のスタイルを設定します
rect.Style.FillColor = Color.FromArgb(200, Color.Transparent);
img.Style.StrokeColor = Color.FromArgb(200, Color.Ivory);
text.Style.FillColor = Color.FromArgb(200, Color.Ivory);

rect.Style.StrokeColor = Color.Blue;
text.Style.StrokeColor = Color.Red;

rect.Style.StrokeWidth = 1;
text.Style.StrokeWidth = 2;

text.Style.Font = new System.Drawing.Font(FontFamily.GenericSansSerif, 9, FontStyle.Bold);

// コンテンツのスタイルをカスタマイズします
rect.ContentStyle.StrokeColor = Color.OrangeRed;
rect.ContentStyle.Font = new System.Drawing.Font(FontFamily.GenericSansSerif, 8.5F, FontStyle.Bold);

' 注釈のスタイルを設定します
rect.Style.FillColor = Color.FromArgb(200, Color.Transparent)
img.Style.StrokeColor = Color.FromArgb(200, Color.Ivory)
text.Style.FillColor = Color.FromArgb(200, Color.Ivory)

rect.Style.StrokeColor = Color.Blue
text.Style.StrokeColor = Color.Red

rect.Style.StrokeWidth = 1
text.Style.StrokeWidth = 2

text.Style.Font = New System.Drawing.Font(FontFamily.GenericSansSerif, 9, FontStyle.Bold)

' コンテンツのスタイルをカスタマイズします
rect.ContentStyle.StrokeColor = Color.OrangeRed
rect.ContentStyle.Font = New System.Drawing.Font(FontFamily.GenericSansSerif, 8.5F, FontStyle.Bold)