Esercitazione: personalizzazione di un grafico tramite eventi (controlli Chart)

Articolo
02/27/2011

In questa esercitazione viene illustrato come utilizzare gli eventi per personalizzare il grafico. Verrà aggiunto un indicatore personalizzato in corrispondenza del punto dati con valore massimo per evidenziare il venditore con il maggior numero di vendite dell'anno.

Per completare questa esercitazione, è necessario avere completato l'esercitazione descritta in Esercitazione: associazione dati di un grafico a un database

Aggiunta dello spazio dei nomi Chart

Per iniziare, aprire il file code-behind nell'applicazione ASP.NET o passare alla visualizzazione del codice nell'applicazione Windows Form.

All'inizio del file di codice aggiungere lo spazio dei nomi Chart come illustrato di seguito.

' 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;

Aggiunta dell'evento PostPaint

Aggiunge un gestore eventi per l'evento Chart.PostPaint.

In Windows Form eseguire questa operazione nel costruttore del form, subito dopo il metodo InitializeComponent. In ASP.NET eseguire questa operazione nel metodo del gestore eventi Page_Load che viene creato automaticamente.

AddHandler Me.Chart1.PostPaint, AddressOf Chart1_PostPaint

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

Aggiungere quindi la definizione del metodo per il gestore eventi appena registrato. A tale scopo, aggiungere il seguente codice nella definizione della classe.

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

void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
}

Esecuzione di un disegno personalizzato

Verrà ora aggiunto il codice personalizzato che evidenzia il venditore con il maggior numero di vendite dell'anno. A tale scopo, aggiungere il codice seguente al gestore eventi Chart1_PostPaint appena creato, salvare il file ed eseguire l'applicazione.

' 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);
         }
      }
   }
}

Vedere anche

Riferimento

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

Altre risorse

Introduzione

Personalizzazioni ed eventi

Condividi tramite