画像注釈

画像注釈には視覚的なインパクトがあり、ユーザーがチャートデータをすばやく解釈できるようにします。画像注釈によって有益な情報を伝えるには、ツールチップを追加すると便利です。

次の図に、ツールチップと画像注釈を使用して、ファーストフードチェーンの中で売上高が最大のチェーンを示します。

FlexChart で画像注釈を使用するには、Image クラスのインスタンスを作成し、SourceImage プロパティで画像のパスを指定してインスタンスの画像を設定します。Height および Width プロパティを設定して、画像をスケーリングしたり、サイズを調整します。画像注釈にツールチップを追加するには、画像注釈インスタンスで AnnotationBase クラスの TooltipText プロパティを設定します。

次のコードは、米国におけるファーストフードチェーンの売上高を比較します。このコードは、FlexChart の画像注釈を追加、配置、カスタマイズする方法を示します。

Visual Basic
C#

Visual Basic

' イメージ注釈のインスタンスを作成します。
Dim image1 As New C1.Win.Chart.Annotation.Image()
Dim image2 As New C1.Win.Chart.Annotation.Image()
Dim image3 As New C1.Win.Chart.Annotation.Image()
Dim image4 As New C1.Win.Chart.Annotation.Image()
Dim image5 As New C1.Win.Chart.Annotation.Image()

' 注釈のソースイメージを設定します。
image1.SourceImage = Image.FromFile("C:\Resources\image1.png")
image2.SourceImage = Image.FromFile("C:\Resources\image2.png")
image3.SourceImage = Image.FromFile("C:\Resources\image3.png")
image4.SourceImage = Image.FromFile("C:\Resources\image4.png")
image5.SourceImage = Image.FromFile("C:\Resources\image5.png")

' イメージの添付を指定します。
image1.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image2.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image3.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image4.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate
image5.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate

' イメージの場所を設定します。
image1.Location = New PointF(1, 35)
image2.Location = New PointF(2, 15)
image3.Location = New PointF(3, 11)
image4.Location = New PointF(4, 8)
image5.Location = New PointF(5, 7)

' イメージの位置を設定します。
image1.Position = C1.Chart.Annotation.AnnotationPosition.Center
image2.Position = C1.Chart.Annotation.AnnotationPosition.Center
image3.Position = C1.Chart.Annotation.AnnotationPosition.Center
image4.Position = C1.Chart.Annotation.AnnotationPosition.Center
image5.Position = C1.Chart.Annotation.AnnotationPosition.Center

' イメージをスケールします。
image1.Width = 68
image1.Height = 62
image2.Width = 60
image2.Height = 61

' ツールチップを追加します。
image1.TooltipText = "トップファストフードチェーンの中で最も高い収益" & vbLf & "35ビリオン ($)"

' 注釈レイヤの注釈コレクションにイメージを追加します。
annotationLayer.Annotations.Add(image1)
annotationLayer.Annotations.Add(image2)
annotationLayer.Annotations.Add(image3)
annotationLayer.Annotations.Add(image4)
annotationLayer.Annotations.Add(image5)

// イメージ注釈のインスタンスを作成します。
C1.Win.Chart.Annotation.Image image1 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image2 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image3 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image4 = new C1.Win.Chart.Annotation.Image();
C1.Win.Chart.Annotation.Image image5 = new C1.Win.Chart.Annotation.Image();

// 注釈のソースイメージを設定します。
image1.SourceImage = Image.FromFile("C:\\Resources\\image1.png");
image2.SourceImage = Image.FromFile("C:\\Resources\\image2.png");
image3.SourceImage = Image.FromFile("C:\\Resources\\image3.png");
image4.SourceImage = Image.FromFile("C:\\Resources\\image4.png");
image5.SourceImage = Image.FromFile("C:\\Resources\\image5.png");

// イメージの添付を指定します。
image1.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image2.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image3.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image4.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;
image5.Attachment = C1.Chart.Annotation.AnnotationAttachment.DataCoordinate;

// イメージの場所を設定します。
image1.Location = new PointF(1, 35);
image2.Location = new PointF(2, 15);
image3.Location = new PointF(3, 11);
image4.Location = new PointF(4, 8);
image5.Location = new PointF(5, 7);

// イメージの位置を設定します。
image1.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image2.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image3.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image4.Position = C1.Chart.Annotation.AnnotationPosition.Center;
image5.Position = C1.Chart.Annotation.AnnotationPosition.Center;

// イメージをスケールします。
image1.Width = 68;
image1.Height = 62;
image2.Width = 60;
image2.Height = 61;

// ツールチップを追加します。
image1.TooltipText = "トップファストフードチェーンの中で最も高い収益\n35ビリオン($)";

// 注釈レイヤの注釈コレクションにイメージを追加します。
annotationLayer.Annotations.Add(image1);
annotationLayer.Annotations.Add(image2);
annotationLayer.Annotations.Add(image3);
annotationLayer.Annotations.Add(image4);
annotationLayer.Annotations.Add(image5);