Tutorial: Personalizar un gráfico con eventos (Controles Chart)
En este tutorial se muestra el uso de los eventos para personalizar el gráfico. Agregará un identificador personalizado en el punto de datos máximo para resaltar al vendedor con las ventas más altas de este año.
Para completar este tutorial, debe haber completado el Tutorial: Enlazar datos entre un gráfico y una base de datos
Agregar el espacio de nombres Chart
Para comenzar, abra el archivo de código subyacente en la aplicación ASP.NET o cambie a la vista de código de la aplicación Windows Forms.
En la parte superior del archivo de código, agregue el espacio de nombres Chart como se muestra a continuación.
' 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;
Agregar el evento PostPaint
Agregue un controlador de eventos para el evento Chart.PostPaint.
En Windows Forms, realice esta acción en el constructor del formulario, a continuación del método InitializeComponent. En ASP.NET, hágalo en el método del controlador de eventos Page_Load que se crea automáticamente.
AddHandler Me.Chart1.PostPaint, AddressOf Chart1_PostPaint
this.Chart1.PostPaint += new EventHandler<ChartPaintEventArgs>(Chart1_PostPaint);
Después, agregue la definición del método del controlador de eventos que acaba de registrar. Para ello, agregue el siguiente código en la definición de clase.
Private Sub Chart1_PostPaint(ByVal sender As Object, ByVal e As ChartPaintEventArgs)
End Sub
void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
}
Ejecutar un representación personalizada
Agregará código personalizado que resalte al vendedor con las ventas más altas de este año. Para ello, agregue el siguiente código al controlador de eventos Chart1_PostPaint que acaba de crear, guarde el archivo y ejecute la aplicación.
' 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);
}
}
}
}
Vea también
Referencia
System.Windows.Forms.DataVisualization.Charting
System.Web.UI.DataVisualization.Charting