[WinForm] 두 개의 Chart, 수학 함수 그래프 그리기

 

두 개의 차트 영역, 두 개의 시리즈 사용

 Chart 컨트롤 하나는 ChartArea 컬렉션과 Series 컬렉션을 갖는다. ChartArea는 차트가 그려지는 영역이고, Series는 데이터를 의미한다. 즉, Chart 컨트롤 하나가 여러 개의 차트 영역과 시리즈를 가질 수 있다. Chart 컨트롤을 폼에 추가하면 ChartArea1과 Series1이 추가되어있다.

 

이번에 만들어볼 차트는

 두 개의 차트 영역에 두 개의 시리즈(수학, 영어)가 출력되게한다. 이때, 아래에 있는 "합쳐서 그리기" 버튼을 클릭하면 두 개의 시리즈가 하나의 차트 영역에 합쳐서 보이도록 해준다. 다시 "나누어 그리기" 버튼을 클릭하면 처음처럼 두 개의 차트 영역에 각각의 시리즈가 그려지게 되는 차트를 만들어볼것이다.

 

 

도구상자에서 Chart를 폼에 드래그 앤 드롭 해주고, 버튼 두개를 생성해준다.

하나의 버튼에는 Name을 btnOneChartArea, Text를 합쳐서 그리기

다른 하나에는 Name을 btnTwoChartArea, Text를 나누어 그리기로 해준다.

using System;
using System.Windows.Forms;
namespace _20200909_002
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.Text = "Using Chart Control";
        }
        private void Form1_Load(object sender, EventArgs e)
        {
            chart1.Titles.Add("중간고사 성적");  // Chart 제목을 중간고사 성적으로 설정
            chart1.Series.Add("Series2");      // 디폴트로 Series1 이 있는데, Series2라는 이름의 Series를 추가
            chart1.Series["Series1"].LegendText = "수학";  // 범례를 수학, 영어로 정해준다
            chart1.Series["Series2"].LegendText = "영어";

            chart1.ChartAreas.Add("ChartArea2"); // 디폴트로 ChartArea1라는 차트 영역이있는데 ChartArea2라는 차트 영역을 추가해준다.    
            chart1.Series["Series2"].ChartArea = "ChartArea2"; // Series2의 ChartArea를 ChartArea2로 지정해준다. 이러면 영어 점수가 두번째 차트 영역에 표시된다.

            Random r = new Random();  // 랜덤 객체 생성
            for (int i = 0; i < 10; i++)   // Series1, Series2를 랜덤하게 10개의 데이터를 추가
            {
                chart1.Series["Series1"].Points.AddXY(i, r.Next(100));
                chart1.Series["Series2"].Points.AddXY(i, r.Next(100));
            }
        }
        
        private void btnOneChartArea_Click(object sender, EventArgs e)
        {
        // 버튼을 클릭했을때 ChartArea2를 삭제하고 Series2의 ChartArea를 ChartArea1으로 지정해준다.
            chart1.ChartAreas.RemoveAt(chart1.ChartAreas.IndexOf("ChartArea2")); 
            chart1.Series["Series2"].ChartArea = "ChartArea1"; // ChartArea1에 두 개의 시리즈가 다 표시된다.
        }
        
        private void btnTwoChartArea_Click(object sender, EventArgs e)
        {
        // 버튼을 클릭하면 ChartArea2를 추가하고 Series2의 ChartArea를 ChartArea2로 지정해준다.
            chart1.ChartAreas.Add("ChartArea2");
            chart1.Series["Series2"].ChartArea = "ChartArea2";
        }
    }
}

 

합쳤을때(좌)                                                                            나눴을때(우)

 

 

 

 

 

 

 

Chart 컨트롤을 이용한 수학 함수 그래프 그리기

Chart 컨트롤을 이용하면 수학 함수를 그래프로 그릴 수 있다. sin(x)/x와 cos(x)/x의 그래프를 그려보자.

디자인은 Chart를 드래그 앤 드롭하고 Chart속성의 Dock을 Fill로 만들어 Form에 차트가 가득차게 해주면 된다.

 

 차트 컨트롤에는 여러 개의 ChartArea, 여러 개의 Series, 여러 개의 범례들이 있을 수 있다. 그래프가 표시 되는 영역이 ChartArea이다. 하나의 차트 영역 안에 여러 개의 그래프가 표시될 수 있는데 그래프 하나는 시리즈 하나로 표시된다.

그래프는 OnPaint() 메서드 안에 만들도록 하겠다.

OnPaint() 함수는 Paint 이벤트를 처리하는 메서드로, 프로그램이 시작되거나 다른 창이 덮었다 없어졌을때, 폼이 최소화되었다가 원래로 돌아올 때처럼 폼의 내용을 다시 그려야하는 Paint 이벤트가 발생할때 호출되는 메서드이다.

 

using System;
using System.Drawing;
using System.Windows.Forms;
using System.Windows.Forms.DataVisualization.Charting;

namespace _20200909_003
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            this.Text = "Graph using Chart";
        }
        protected override void OnPaint(PaintEventArgs e)
        {
            chart1.ChartAreas[0].BackColor = Color.Black; // 배경색을 검은색으로 설정

            //ChartArea X축과 Y축을 설정
            chart1.ChartAreas[0].AxisX.Minimum = -20;
            chart1.ChartAreas[0].AxisX.Maximum = 20;
            chart1.ChartAreas[0].AxisX.Interval = 2;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;
            chart1.ChartAreas[0].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dash;

            chart1.ChartAreas[0].AxisY.Minimum = -2;
            chart1.ChartAreas[0].AxisY.Maximum = 2;
            chart1.ChartAreas[0].AxisY.Interval = 0.5;
            chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;
            chart1.ChartAreas[0].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;


            //Series 설정(sin)
            //chart1에 디폴트로 추가되어있는 Series의 차트타입, 색, 선두께, 범례 지정
            chart1.Series[0].ChartType = SeriesChartType.Line;
            chart1.Series[0].Color = Color.LightGreen;
            chart1.Series[0].BorderWidth = 2;
            chart1.Series[0].LegendText = "sin(x)/x";


            //Series 추가, 설정(Cos)
            // chart1의 시리즈 개수가 1이라면 "Cos"이라는 이름의 시리즈를 추가하고 차트 타입, 색, 선 두께, 범례를 지정한다.
            // 두번째 시리즈는 Series["Cos"]처럼 이름으로 사용해도되고, Series[1]로 사용해도 상관없다.
            // 이 if문으로 인해 그래프 2개가 하나의 차트영역에 출력된다.
            if (chart1.Series.Count == 1)
            {
                chart1.Series.Add("Cos");
                chart1.Series["Cos"].ChartType = SeriesChartType.Line;
                chart1.Series["Cos"].Color = Color.Orange;
                chart1.Series["Cos"].BorderWidth = 2;
                chart1.Series["Cos"].LegendText = "cos(x)/x";
            }
            
            // x 값이 -20에서 +20까지 0.1씩 증가하면서 sin 시리즈에는 sin(x)/x, cos 시리즈에는 cos(x)/x의 값을 추가한다.
            for(double x = -20; x<20; x += 0.1)
            {
                double y = Math.Sin(x) / x;
                chart1.Series[0].Points.AddXY(x, y);
                y = Math.Cos(x) / x;
                chart1.Series["Cos"].Points.AddXY(x, y);
            }
        }
    }
}

함수 출력 화면

 

 

출처 : https://andjjip.tistory.com/176