Interaktivität
Abhängig vom verwendeten Diagrammsteuerelement können Sie verschiedene Funktionen und Techniken verwenden, um dem Diagrammsteuerelement Interaktivität hinzuzufügen.
Interaktivität in ASP.NET
Im Diagrammsteuerelement für ASP.NET können Sie clientseitige Imagemaps für eine umfangreichere, vom Benutzer wahrgenommene Interaktivität der Diagramme zu erzielen.Legen Sie zum Aktivieren von Imagemaps die IsMapEnabled-Eigenschaft auf True fest.
Anschließend können Sie eine oder mehrere der folgenden Aufgaben durchführen:
Sie können die Strukturbereichseigenschaften in einem bestimmten Element des Diagrammsteuerelements angeben.Dies ist bei den meisten Elementen möglich, z. B. Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem und LegendCell.
Verwenden Sie in allen diesen Elementen die Tooltip-Eigenschaft und die Url-Eigenschaft.Diese entsprechen dem alt-Attribut und href-Attribut im HTML MAP-Tag.Um zusätzliche Strukturbereichsattribute anzugeben, verwenden Sie die MapAreaAttributes-Eigenschaft.Wenn Sie mehrere Attribute angeben möchten, trennen Sie diese durch Leerzeichen.Sie können in dieser Eigenschaft beispielsweise den folgenden Code angeben, um ein clientseitiges Skript zu registrieren, das ein anderes Diagramm als Popup-QuickInfo anzeigt:
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Das obige Skript setzt voraus, dass das Diagrammsteuerelement in "DetailedChart.aspx" binäres Streaming als Rendertyp verwendet.Weitere Informationen finden Sie unter Diagrammbildrendering.
Verwenden Sie die MapAreas-Auflistungseigenschaft (eine Auflistung von MapArea-Objekten), um Strukturbereiche im Diagrammsteuerelement manuell zu definieren.
Sie können die Form, Koordinaten, URL und QuickInfo des Strukturbereichs in jedem MapArea-Objekt definieren.Sie entsprechen den folgenden Attributen im HTML MAP-Tag: shape, coord, href und alt.
Um weitere Strukturbereichsattribute anzugeben, die nicht über eine entsprechende Eigenschaft im MapArea-Objekt verfügen, verwenden Sie die MapAreaAttributes-Eigenschaft.
Verwenden Sie die PostBackValue-Eigenschaft in MapArea oder einem oder oben genannten Elemente des Diagrammsteuerelements, um einen Postbackwert für ImageMapEventHandler zu definieren und diesen anschließend über die PostBackValue-Eigenschaft abzurufen, wenn das Ereignis ausgelöst wird.
Hinweis
Sie können in allen diesen Attributen gültige Schlüsselwörter verwenden.Weitere Informationen finden Sie unter Schlüsselwörter.
Im folgenden Code wird das Bild einer Legendenzelle abwechselnd ein. bzw. ausgeblendet, sobald der Benutzer auf die Legendenzelle klickt.
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";
}
}
Interaktivität in Windows Forms
Im Diagrammsteuerelement für Windows Forms können Sie die Diagramminteraktivität mithilfe von Mausereignissen und der HitTest-Methode aktivieren.Darüber hinaus stehen Ihnen Cursor, Bildlauf und Zoom zur Verfügung.Weitere Informationen finden Sie unter Cursor, Zoom und Bildlauf.
Der folgende Beispielcode hebt mithilfe des OnMouseMove-Ereignisses einen Datenpunkt hervor, wenn sich der Cursor über diesen bewegt.
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;
}
}
Siehe auch
Referenz
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting