交互性

项目
08/04/2015

根据所使用的图表控件，可以使用不同的功能和方法来实现图表控件的交互性。

ASP.NET 中的交互性

在 ASP.NET 的图表控件中，可以使用客户端图像映射，以在图表的交互性方面提供更加丰富的用户体验。若要启用图像映射，请将 IsMapEnabled 属性设置为 True。

随后，可以执行以下一个或更多操作：

在图表控件的特定元素中指定映射区属性。可以在大多数元素中进行这种指定，例如 Axis、Series、DataPoint、Annotation、StripLine、LegendCellColumn、LegendItem 和 LegendCell。

在所有这些元素中，都可使用 Tooltip 和 Url 属性。这两个属性对应于 HTML MAP 标记中的 alt 和 href 特性。若要指定其他映射区特性，请使用 MapAreaAttributes 属性。若要指定多个特性，请用空格进行分隔。例如，您可以在此属性中指定下面的代码，以注册将其他图表显示为弹出工具提示的客户端脚本：
```
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"
```
请注意，上面的脚本要求 DetailedChart.aspx 中的图表控件将二进制流用作呈现类型。有关更多信息，请参见图表图像呈现。
使用 MapAreas 集合属性（MapArea 对象的集合）在图表控件中手动定义映射区。

可以在每个 MapArea 对象中定义映射区的形状、坐标、URL 和工具提示。这些内容分别对应于 HTML MAP 标记中的以下特性：shape、coord、href 和 alt。

若要指定在 MapArea 对象中没有相应属性的其他映射区特性，请在 MapAreaAttributes 属性中进行指定。
使用 MapArea 中的 PostBackValue 属性或上面所述的任何图表控件元素都可将一个回发值定义到 ImageMapEventHandler，然后在触发事件时通过 PostBackValue 属性来检索该回发值。

备注

可以在所有这些特性中使用适用的关键字。有关更多信息，请参见关键字。

下面的代码在用户每次单击图例单元格时，在选中和清除之间切换图例单元格的图像。

Imports System.Web.UI.DataVisualization.Charting
...
' Set the legend cell to an image showing selection cleared
Chart1.Legends(0).CustomItems(0).Cells(0).Image = "./cleared.png"
Chart1.Legends(0).CustomItems(0).Cells(0).PostBackValue = "item 1"
' Add an ImageMapEventHandler to the Chart.Click event
Me.Chart1.Click += New ImageMapEventHandler(Me.Chart1_Click)
...
' Change the selection image when the user clicks on the legend cell
Private  Sub Chart1_Click(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
   If e.PostBackValue = "item 1" Then
      Dim cell As LegendCell = Chart1.Legends(0).CustomItems(0).Cells(0)
      cell.Image = (cell.Image = "./cleared.png") ? "./selected.png" : "./cleared.png"
   End If
End Sub

using System.Web.UI.DataVisualization.Charting;
...
// Set the legend cell to an image showing selection cleared
Chart1.Legends[0].CustomItems[0].Cells[0].Image = "./cleared.png";
Chart1.Legends[0].CustomItems[0].Cells[0].PostBackValue = "item 1";
// Add an ImageMapEventHandler to the Chart.Click event
this.Chart1.Click += new ImageMapEventHandler(this.Chart1_Click);
...
// Change the selection image when the user clicks on the legend cell
private void Chart1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e)
{
   if (e.PostBackValue == "item 1")
   {
      LegendCell cell = Chart1.Legends[0].CustomItems[0].Cells[0];
      cell.Image = (cell.Image == "./cleared.png") ? "./selected.png" : "./cleared.png";
   }
}

Windows 窗体中的交互性

在 Windows 窗体的图表控件中，可以使用鼠标事件和 HitTest 方法来实现图表交互性。也可以使用光标、滚动和缩放。有关更多信息，请参见光标、缩放和滚动。

下面的示例代码在光标移到某个数据点上时使用 OnMouseMove 事件来突出显示该数据点。

Me.Chart1.MouseMove += New System.Windows.Forms.MouseEventHandler(Me.Chart1_MouseMove)
...
Private  Sub Chart1_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs)
   ' Call HitTest
   Dim result As HitTestResult =  Chart1.HitTest(e.X,e.Y) 
 
   ' Reset Data Point Attributes
   Dim point As DataPoint
   For Each point In Chart1.Series(0).Points
   poInteger.BackSecondaryColor = Color.Black
   poInteger.BackHatchStyle = ChartHatchStyle.None
   poInteger.BorderWidth = 1
   Next
 
   ' If the mouse if over a data point
   If result.ChartElementType = ChartElementType.DataPoint Then
      ' Find selected data point
      Dim point As DataPoint =  Chart1.Series(0).Points(result.PointIndex) 
 
      ' Change the appearance of the data point
      poInteger.BackSecondaryColor = Color.White
      poInteger.BackHatchStyle = ChartHatchStyle.Percent25
      poInteger.BorderWidth = 2
   Else 
      ' Set default cursor
      Me.Cursor = Cursors.Default
   End If
End Sub

this.Chart1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.Chart1_MouseMove);
...
private void Chart1_MouseMove(object sender, System.Windows.Forms.MouseEventArgs e)
{
   // Call HitTest
   HitTestResult result = Chart1.HitTest( e.X, e.Y );

   // Reset Data Point Attributes
   foreach( DataPoint point in Chart1.Series[0].Points )
   {
   point.BackSecondaryColor = Color.Black;
   point.BackHatchStyle = ChartHatchStyle.None;
   point.BorderWidth = 1;
   }

   // If the mouse if over a data point
   if(result.ChartElementType == ChartElementType.DataPoint)
   {
      // Find selected data point
      DataPoint point = Chart1.Series[0].Points[result.PointIndex];

      // Change the appearance of the data point
      point.BackSecondaryColor = Color.White;
      point.BackHatchStyle = ChartHatchStyle.Percent25;
      point.BorderWidth = 2;
   }
   else
   {
      // Set default cursor
      this.Cursor = Cursors.Default;
   }
}

请参见

交互性

ASP.NET 中的交互性

Windows 窗体中的交互性

请参见

参考

概念

其他资源

其他资源