互動 (Chart 控制項)
根據使用的 Chart 控制項，您可以使用不同功能和技巧，讓 Chart 控制項成為互動式。
ASP.NET 中的互動
在適用於 ASP.NET 的 Chart 控制項中，您可以使用用戶端影像對應，提供更豐富的圖表互動使用者經驗。若要啟用影像對應，請將 IsMapEnabled 屬性設為 True。
然後，您可以執行下列其中一項或多項動作：
指定特定 Chart 控制項項目的對應區域屬性。可在大部分項目中這麼做，例如 Axis、Series、DataPoint、Annotation、StripLine、LegendCellColumn、LegendItem 和 LegendCell。
在每個項目中，使用 Tooltip 和 Url 屬性。它們對應於 HTML MAP 標記中的 alt 和 href 屬性。若要指定其他對應區域屬性 (Attribute)，請使用 MapAreaAttributes 屬性 (Property)。若要指定多個屬性，請使用空格隔開。例如，您可以在這個屬性中指定下列程式碼，註冊以快顯工具提示方式顯示另一個圖表的用戶端指令碼：
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"請注意，上述指令碼要求 DetailedChart.aspx 中的 Chart 控制項應該使用二進位資料流做為呈現類型。如需詳細資訊，請參閱圖表影像呈現。
在圖表控制項中使用 MapAreas 集合屬性 (MapArea 物件集合)，手動定義對應區域。
您可以在每個 MapArea 物件中定義對應區域的形狀、座標、URL 和工具提示。它們分別對應於 HTML MAP 標記中的下列屬性：shape、coord、href、alt。
若要指定 MapArea 物件中沒有對應屬性 (Property) 的其他對應區域屬性 (Attribute)，請在 MapAreaAttributes 屬性 (Property) 中指定。
在 MapArea 或任何上述 Chart 控制項項目中使用 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 Form 中的互動
在適用於 Windows Form 的 Chart 控制項中，您可以使用滑鼠事件和 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