交互性
根据所使用的图表控件,可以使用不同的功能和方法来实现图表控件的交互性。
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;
}
}
请参见
参考
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting