FlexChart は、ヒットテストをサポートし、実行時にコントロールの特定のポイントの情報を取得できます。ポイントされた座標に関する情報を再利用して、チャートデータをドリルダウンしたり、アラートを設定するなどのユーザー操作機能を実装できます。また、ユーザーは、マウス操作またはタッチ操作を使用して、指定されたチャート要素に関する関連情報を取得できます。

FlexChart は、HitTest() メソッドを使用したヒットテストをサポートします。このメソッドは、指示されたエンティティの位置（座標）を取得します。そして、ポインタ位置に関する次の情報を提供する HitTestInfo クラスのオブジェクトを返します。

• ポインタの位置にあるチャート要素
• ポインタがプロット領域内にある場合は、チャート内の最も近いデータポイントからポインタ位置までの距離。ポインタがプロット領域外にある場合は、距離として Double.Nan が返されます。
• 最も近いデータポイントに対応するデータオブジェクト
• 最も近いデータポイントのインデックス
• 最も近いデータポイントが属する系列名
• 最も近いデータポイントの X 値
• 最も近いデータポイントの Y 値

この例では、FlexChart コントロールの MouseMove イベントで HitTest() メソッドが呼び出されます。ここで、ポインタ位置のポイント座標がパラメータとして HitTest() メソッドに渡されます。

FlexChart でヒットテストを有効にするには、次の手順に従います。

1. データ連結 FlexChart コントロールの追加
2. マウスまたはタッチイベントのサブスクライブ
3. マウスまたはタッチイベントハンドラでのチャートの HitTest メソッドの呼び出し
4. HitTestInfo オブジェクトから返された情報の使用

先頭に戻る

1. データ連結 FlexChart コントロールの追加
   

   以下のコードスニペットに示すように、アプリケーションに FlexChart コントロールのインスタンスを追加し、適切なデータソースに連結します。

   • Xaml

           <Chart:C1FlexChart x:Name="flexChart"
                              HorizontalAlignment="Left"
                              Height="220" Margin="70,25,0,0"
                              VerticalAlignment="Top" Width="455"
                              Binding="YVals" BindingX="XVals" ChartType="SplineSymbols" >
               <Chart:C1FlexChart.Series>
                   <Chart:Series x:Name="series0" SeriesName="系列0"/>
                   <Chart:Series x:Name="series1" SeriesName="系列1" />
               </Chart:C1FlexChart.Series>
           </Chart:C1FlexChart>
           <TextBlock x:Name="tbPosition1" Margin="155,250,255,185"/>
       </Grid>
   </Page>
   

   先頭に戻る

2. マウスまたはタッチイベントのサブスクライブ

   以下のコードスニペットに示すように、ポインタ座標を取得するためにマウスイベントをサブスクライブします。

   • Xaml

       <Chart:C1FlexChart x:Name="flexChart"
                      HorizontalAlignment="Left"
                      Height="220" Margin="70,25,0,0"
                      VerticalAlignment="Top" Width="455"
                      Binding="YVals" BindingX="XVals" ChartType="SplineSymbols"                            
                      PointerPressed="flexChart_PointerPressed" >
       <Chart:C1FlexChart.Series>
           <Chart:Series x:Name="series0" SeriesName="系列0"/>
           <Chart:Series x:Name="series1" SeriesName="系列1" />
       </Chart:C1FlexChart.Series>
   </Chart:C1FlexChart>
   

   先頭に戻る

3. マウスまたはタッチイベントハンドラでのチャートの HitTest メソッドの呼び出し

   以下のコードスニペットに示すように、対応するイベントハンドラで、HitTest() メソッドを呼び出し、取得したマウスポインタ座標を渡します。

   • C#

   • C#

   private void flexChart_PointerPressed(object sender, PointerRoutedEventArgs e)
   {
       HitTestOnFlexChart(e.GetCurrentPoint(flexChart).Position);
   }
   

   先頭に戻る

4. HitTestInfo オブジェクトから返された情報の使用

   次に、HitTestInfo オブジェクトで返されたマウスポインタの位置に関する情報を再利用できます。たとえば、以下のコードスニペットでは、HitTestInfo オブジェクトで返された値が文字列に変換され、TextBlock に表示されます。

   • C#

   • C#

   void HitTestOnFlexChart(Point p)
   {
       // マウスオーバーまたはタッチ時のチャート要素に関する情報を表示します
       var ht = flexChart.HitTest(p);
       var result = new StringBuilder();
       result.AppendLine(string.Format("チャート要素: {0}", ht.ChartElement));
       if (ht.Series != null)
           result.AppendLine(string.Format("系列名: {0}", ht.Series.Name));
       if (ht.PointIndex > 0)
           result.AppendLine(string.Format("ポイントインデックス= {0:0}", ht.PointIndex));
       if (ht.Distance > 0)
           result.AppendLine(string.Format("距離= {0:0}", ht.Distance));
       if (ht.X != null)
           result.AppendLine(string.Format("X= {0:0:0}", ht.X));
       if (ht.Y != null)
           result.AppendLine(string.Format("Y= {0:0:0}", ht.Y));
       tbPosition1.Text = result.ToString();            
   }
   

先頭に戻る