Didacticiel : personnalisation d'un graphique avec des événements (contrôles Chart)

Article
02/27/2011

Ce didacticiel montre comment utiliser des événements pour personnaliser votre graphique. Vous allez ajouter un marqueur personnalisé au point de données maximal afin de mettre en surbrillance le commercial qui a les ventes les plus élevées cette année.

Pour effectuer ce didacticiel, vous devez avoir effectué au préalable Didacticiel : liaison de données entre un graphique et une base de données.

Ajout de l'espace de noms du graphique

Pour commencer, ouvrez le fichier code-behind dans votre application ASP.NET ou basculez en mode Code dans votre application Windows Forms.

En haut du fichier de code, ajoutez l'espace de noms du graphique comme indiqué ci-dessous.

' For Windows Forms
Imports System.Windows.Forms.DataVisualization.Charting
' For ASP.NET
Imports System.Web.UI.DataVisualization.Charting

// For Windows Forms
using System.Windows.Forms.DataVisualization.Charting;
// For ASP.NET
using System.Web.UI.DataVisualization.Charting;

Ajout de l'événement PostPaint

Ajoutez un gestionnaire d'événements pour l'événement Chart.PostPaint.

Dans Windows Forms, vous devez le faire à partir du constructeur du formulaire, juste après la méthode InitializeComponent. Dans ASP.NET, vous devez le faire dans la méthode de gestionnaire d'événements Page_Load créée automatiquement.

AddHandler Me.Chart1.PostPaint, AddressOf Chart1_PostPaint

this.Chart1.PostPaint += new EventHandler<ChartPaintEventArgs>(Chart1_PostPaint);

Ajoutez ensuite la définition de méthode pour le gestionnaire d'événements que vous venez d'inscrire. Pour ce faire, ajoutez le code suivant à la définition de classe.

Private Sub Chart1_PostPaint(ByVal sender As Object, ByVal e As ChartPaintEventArgs) 
End Sub 

void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
}

Effectuer le dessin personnalisé

Vous allez maintenant ajouter du code personnalisé afin de mettre en surbrillance le commercial qui a les ventes les plus élevées cette année. Pour ce faire, ajoutez le code ci-dessous au gestionnaire d'événements Chart1_PostPaint que vous venez de créer, enregistrez le fichier, puis exécutez votre application.

' Make sure all series have been drawn before proceeding 
If TypeOf e.ChartElement Is Series AndAlso DirectCast(e.ChartElement, Series).Name = "Series2" Then 
   Dim s As Series = e.Chart.Series(0) 
   Dim cg As ChartGraphics = e.ChartGraphics 
   Dim max As Double = s.Points.FindMaxByValue().YValues(0) 
   
   ' Highlight the maximum sales this year 
   For i As Integer = 0 To s.Points.Count - 1 
      If s.Points(i).YValues(0) = max Then 
         ' Get relative coordinates of the data point 
         Dim pos As System.Drawing.PointF = System.Drawing.PointF.Empty 
         pos.X = CSng(cg.GetPositionFromAxis("ChartArea1", AxisName.X, i+1)) 
         pos.Y = CSng(cg.GetPositionFromAxis("ChartArea1", AxisName.Y, max)) 
         
         ' Convert relative coordinates to absolute coordinates. 
         pos = cg.GetAbsolutePoint(pos) 
         
         ' Draw concentric circles at the data point 
         For radius As Integer = 10 To 39 Step 10 
            cg.Graphics.DrawEllipse(System.Drawing.Pens.Red, _
               CSng(pos.X - radius / 2), _
               CSng(pos.Y - radius / 2), radius, radius) 
         Next 
      End If 
   Next 
End If

// Make sure all series have been drawn before proceeding
if (e.ChartElement is Series && ((Series)e.ChartElement).Name == "Series2" )
{
    Series s = e.Chart.Series[0];
    ChartGraphics cg = e.ChartGraphics;
    double max = s.Points.FindMaxByValue().YValues[0];

   // Highlight the maximum sales this year
   for(int i = 0; i < s.Points.Count; i++)
   {
      if(s.Points[i].YValues[0] == max)
      {
         // Get relative coordinates of the data point
         System.Drawing.PointF pos = System.Drawing.PointF.Empty;
         pos.X = (float)cg.GetPositionFromAxis("ChartArea1", AxisName.X, i);
         pos.Y = (float)cg.GetPositionFromAxis("ChartArea1", AxisName.Y, max);

         // Convert relative coordinates to absolute coordinates.
         pos = cg.GetAbsolutePoint(pos);

         // Draw concentric circles at the data point
         for (int radius = 10; radius < 40; radius += 10)
         {
            cg.Graphics.DrawEllipse(
               System.Drawing.Pens.Red, 
               pos.X - radius / 2, 
               pos.Y - radius / 2, 
               radius, radius);
         }
      }
   }
}

Voir aussi

Référence

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

Autres ressources

Mise en route

Personnalisation et événements

Share via