FlexChart for UWP
ラインマーカー
FlexChart > FlexChart の操作 > エンドユーザー操作 > ラインマーカー

ラインマーカーは、プロット上で水平線または垂直線をドラッグすることで、チャート内の特定の位置の正確なデータ値を添付ラベルを使用して表示します。折れ線グラフや面グラフに多数のデータがある場合や、複数の系列のデータを 1 つのラベルに表示したい場合などに便利です。Drag、Move などの組み込み操作を使用すると、ラインマーカーをドラッグしてチャート内のデータポイントをより正確に選択できます。

FlexChart でラインマーカーを作成して使用するには、C1.Xaml.Chart.Interaction.C1LineMarker クラスのインスタンスを作成する必要があります.

C1LineMarker で提供されている Lines プロパティを使用して、LineMarker の線の表示/非表示を設定します。Lines プロパティは、LineMarkerLines 列挙に含まれる次の値を受け取ります。

C1LineMarker クラスでは、ラインマーカーの配置を設定するための Alignment プロパティも提供されています。さらに、Interaction プロパティを LineMarkerInteraction 列挙に含まれる次の値のいずれかに設定して、ラインマーカーの操作モードを設定することができます。

Interaction プロパティを Drag に設定する場合は、DragContent プロパティと DragLines プロパティを設定して、ラインマーカーの線にリンクされた内容や値がドラッグ可能かどうかを指定する必要があります。Furthermore, you can set the initial position of the line marker relative to the plot area with the help of VerticalPosition and HorizontalPostion properties. The acceptable range for these properties is [0,1].

次のコードスニペットに、実装方法を示します。

<Chart:C1FlexChart.Layers>
    <Interaction:C1LineMarker x:Name="lineMarker" DragThreshold="30" 
    PositionChanged="OnLineMarkerPositionChanged"/>
</Chart:C1FlexChart.Layers>
C#
コードのコピー
private void OnLineMarkerPositionChanged(object sender, PositionChangedArgs e)
{
    if (flexChart != null)
    {
        var info = flexChart.HitTest(e.Position);
        int pointIndex = info.PointIndex;
        var tb = new TextBlock();
        if (info.X == null)
            return;

        tb.Inlines.Add(new Run()
        {
            Text = info.X.ToString()
        });
        for (int index = 0; index < flexChart.Series.Count; index++)
        {
            var series = flexChart.Series[index];
            var value = series.GetValues(0)[pointIndex];
            var fill = (int)((IChart)flexChart).GetColor(index);
            string content = string.Format("{0}{1} = {2}", "\n", 
            series.SeriesName, value.ToString());
            tb.Inlines.Add(new Run()
            {
                Text = content,
                Foreground = new SolidColorBrush() { Color = FromArgb(fill) }
            });
        }
        tb.IsHitTestVisible = false;
        lineMarker.Content = tb;
    }
}

VB
コードのコピー
    Private Sub OnLineMarkerPositionChanged(sender As Object, e As PositionChangedArgs)
        If flexChart IsNot Nothing Then
            Dim info As HitTestInfo = flexChart.HitTest(e.Position)
            If info.Item Is Nothing Then
                Return
            End If
            Dim pointIndex As Integer = info.PointIndex
            Dim tb As New TextBlock()
            tb.Inlines.Add(New Run() With {
                .Text = info.X.ToString()
            })
            Dim index As Integer = 0
            While index < flexChart.Series.Count
                Dim series As Series = flexChart.Series(index)
                Dim value As Object = series.GetValues(0)(pointIndex)
                Dim fill As Integer = CType((CType(flexChart, IChart)).GetColor(index), Integer)
                Dim content As String = String.Format("{0}{1} = {2}", 
vbLf, series.SeriesName, value.ToString())
                tb.Inlines.Add(New Run() With {
                    .Text = content,
                    .Foreground = New SolidColorBrush() With {
                        .Color = FromArgb(fill)
                    }
                })
                index += 1
            End While
            tb.IsHitTestVisible = False
            lineMarker.Content = tb
        End If
    End Sub