Interactivité (contrôles Chart)
Selon le contrôle Chart que vous utilisez, vous pouvez employer diverses fonctionnalités et techniques pour le rendre interactif.
Interactivité dans ASP.NET
Dans le contrôle Chart pour ASP.NET, vous pouvez utiliser des images interactives côté client pour une expérience utilisateur plus riche dans l'interactivité de vos graphiques. Pour activer les images interactives, affectez à la propriété IsMapEnabled la valeur True.
Vous pouvez ensuite effectuer une ou plusieurs des opérations suivantes :
Spécifier les propriétés de zone réactive dans un élément spécifique du contrôle Chart. Vous pouvez le faire dans la plupart des éléments, tels que Axis, Series, DataPoint, Annotation, StripLine, LegendCellColumn, LegendItem et LegendCell.
Dans chacun de ces éléments, utilisez les propriétés Tooltip et Url. Elles correspondent aux attributs href et alt de la balise HTML MAP. Pour spécifier des attributs de zone réactive supplémentaires, utilisez la propriété MapAreaAttributes. Pour spécifier plusieurs attributs, séparez-les par des espaces. Par exemple, vous pouvez spécifier le code suivant dans cette propriété pour enregistrer un script côté client qui affiche un autre graphique sous forme d'info-bulle contextuelle :
onmouseover=\"DisplayTooltip(' <img src=DetailedChart.aspx />');\"Notez que, pour que le script ci-dessus fonctionne, le contrôle Chart de DetailedChart.aspx doit utiliser comme type de rendu les flux binaires. Pour plus d'informations, consultez Rendu de l'image du graphique.
Définir manuellement des zones réactives dans votre contrôle Chart à l'aide de la propriété de collection MapAreas (une collection d'objets MapArea).
Vous pouvez définir dans chaque objet MapArea la forme, les coordonnées, l'URL et l'info-bulle de la zone réactive. Ils correspondent aux attributs respectifs suivants de la balise HTML MAP : shape, coord, href et alt.
Pour spécifier des attributs de zone réactive supplémentaires qui n'ont pas de propriété correspondante dans l'objet MapArea, spécifiez-les dans la propriété MapAreaAttributes.
Utiliser la propriété PostBackValue dans MapArea ou chacun des éléments du contrôle Chart mentionnés ci-dessus pour définir une valeur de publication pour ImageMapEventHandler, puis récupérer la valeur de publication via la propriété PostBackValue lorsque l'événement est déclenché.
Notes
Vous pouvez utiliser les mots clés applicables dans tous ces attributs. Pour plus d'informations, consultez Mots clés.
Le code suivant sélectionne et désélectionne l'image d'une cellule de légende chaque fois que l'utilisateur clique sur cette cellule.
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";
}
}
Interactivité dans les Windows Forms
Dans le contrôle Chart pour les Windows Forms, vous utilisez les événements de souris et la méthode HitTest pour permettre l'interactivité du graphique. Vous pouvez également utiliser des curseurs, le défilement et le zoom. Pour plus d'informations, consultez Curseurs, zoom et défilement.
L'exemple de code suivant utilise l'événement OnMouseMove pour mettre en surbrillance un point de données lorsque le curseur se déplace au-dessus.
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;
}
}
Voir aussi
Référence
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting