画像注釈

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

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

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

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

XAML

<c1:C1FlexChart.Layers>
    <c1:AnnotationLayer>
        <c1:AnnotationLayer.Annotations>
            <c1:Image Source="C:\\Resources\\image1.png"
                Attachment="DataCoordinate"
                      Location="1,35"
                      Position="Center"
                      Width="68"
                      Height="62"
                      TooltipText="トップファストフードチェーンの中で最も高い収益\n35ビリオン($)">
            </c1:Image>
            <c1:Image Source="C:\\Resources\\image2.png"
                Attachment="DataCoordinate"
                      Location="2,15"
                      Position="Center"
                      Width="60"
                      Height="61">
            </c1:Image>
            <c1:Image Source="C:\\Resources\\image3.png"
                Attachment="DataCoordinate"
                      Location="3,11"
                      Position="Center">
            </c1:Image>
            <c1:Image Source="C:\\Resources\\image4.png"
                Attachment="DataCoordinate"
                      Location="4,8"
                      Position="Center">
            </c1:Image>
            <c1:Image Source="C:\\Resources\\image5.png"
                Attachment="DataCoordinate"
                      Location="5,7"
                      Position="Center">
            </c1:Image>
        </c1:AnnotationLayer.Annotations>
    </c1:AnnotationLayer>
</c1:C1FlexChart.Layers>