자습서: 이벤트를 사용하여 차트 사용자 지정(차트 컨트롤)

이 자습서에서는 이벤트를 사용하여 차트를 사용자 지정하는 방법에 대해 설명합니다. 올해 실적이 가장 높은 영업 사원을 강조 표시하기 위해 최대 데이터 요소에 사용자 지정 표식을 추가하려고 합니다.

이 자습서를 완료하려면 먼저 자습서: 데이터베이스에 차트 데이터 바인딩 자습서를 완료해야 합니다.

차트 네임스페이스 추가

시작하려면 ASP.NET 응용 프로그램에서 코드 숨김 파일을 열거나, Windows Form 응용 프로그램에서 코드 뷰로 전환합니다.

코드 파일의 맨 위에 다음과 같이 차트 네임스페이스를 추가합니다.

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

PostPaint 이벤트 추가

Chart.PostPaint 이벤트에 대한 이벤트 처리기를 추가합니다.

Windows Forms에서는 InitializeComponent 메서드 바로 다음에 폼의 생성자에서 이를 수행하고, ASP.NET에서는 자동으로 만들어진 Page_Load 이벤트 처리기 메서드에서 이를 수행합니다.

AddHandler Me.Chart1.PostPaint, AddressOf Chart1_PostPaint

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

그런 다음 방금 등록한 이벤트 처리기에 대한 메서드 정의를 추가합니다. 이렇게 하려면 다음 코드를 클래스 정의에 추가합니다.

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

void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
{
}

사용자 지정 그리기 수행

올해 실적이 가장 높은 영업 사원을 강조 표시하는 사용자 지정 코드를 추가하려고 합니다. 이렇게 하려면 방금 만든 Chart1_PostPaint 이벤트 처리기 아래에 코드를 추가하고 파일을 저장한 후 응용 프로그램을 실행합니다.

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

참고 항목

참조

System.Windows.Forms.DataVisualization.Charting

System.Web.UI.DataVisualization.Charting

관련 자료

시작

사용자 지정 및 이벤트