Interattività
A seconda del controllo Chart utilizzato, è possibile utilizzare differenti funzionalità e tecniche per rendere interattivo il controllo Chart in uso.
Interattività in ASP.NET
Nel controllo Chart per ASP.NET, è possibile utilizzare mappe immagine sul lato client per offrire all'utente una migliore esperienza nell'interazione con i grafici. Per abilitare le mappe immagine, impostare la proprietà IsMapEnabled su True.
Quindi, è possibile eseguire una o più delle operazioni seguenti.
Specificare le proprietà dell'area della mappa in un particolare elemento del controllo Chart. È possibili eseguire questa operazione nella maggioranza degli elementi, come ad esempio Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem e LegendCell.
In ciascuno di questi elementi, utilizzare le proprietà Tooltip e Url. Queste proprietà corrispondono agli attributi alt e href nel tag MAP HTML. Per specificare attributi aggiuntivi per l'area della mappa, utilizzare la proprietà MapAreaAttributes. Per specificare più attributi, separarli con spazi. Ad esempio, in questa proprietà è possibile specificare il codice riportato di seguito per registrare uno script del lato client che visualizza un altro grafico come descrizione comando popup.
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Notare che lo script suddetto richiede che il controllo Chart definito in DetailedChart.aspx utilizzi un flusso binario come tipo di rendering. Per ulteriori informazioni, vedere Rendering di immagini di grafici.
Definire manualmente le aree di mappa nel controllo Chart utilizzando la proprietà di raccolta MapAreas (una raccolta di oggetti MapArea).
In ciascun oggetto MapArea, è possibile definire forma, coordinate, URL e descrizione comando dell'area della mappa. Tali elementi corrispondono rispettivamente ai seguenti attributi nel tag MAP HTML: shape, coord, href e alt.
Per specificare attributi aggiuntivi per l'area della mappa che non dispongono di una proprietà corrispondente nell'oggetto MapArea, specificarli tramite la proprietà MapAreaAttributes.
Utilizzare la proprietà PostBackValue in MapArea o qualsiasi altro elemento del controllo Chart precedentemente menzionato per definire un valore di postback per ImageMapEventHandler, quindi recuperare tale valore di postback utilizzando la proprietà PostBackValue quando viene generato l'evento.
Nota
In tutti i suddetti attributi è possibile utilizzare le parole chiave applicabili.Per ulteriori informazioni, vedere Parole chiave.
Nel codice riportato di seguito, l'immagine di una cella di legenda alterna tra gli stati selezionata e annullata ogni volta che l'utente fa clic sulla cella della legenda.
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";
}
}
Interattività in Windows Form
Nel controllo Chart per Windows Form, si utilizzano gli eventi del mouse e il metodo HitTest per abilitare l'interattività del grafico. Possono inoltre essere utilizzati cursori, zoom e scorrimento. Per ulteriori informazioni, vedere Cursori, zoom e scorrimento.
Nell’esempio di codice riportato di seguito viene utilizzato l'evento OnMouseMove per evidenziare un punto dati quando il cursore si sposta su di esso.
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;
}
}
Vedere anche
Riferimenti
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting