# برنامه نویسی با محصولات مایکروسافت > برنامه نویسی مبتنی بر Microsoft .Net Framework > C#‎‎ > آموزش: آموزش رسم نمودار در سی شارپ به وسیله MSCHART

## sajadjamalian

سلام دوستان:
توی یکی از پروژه هام احتیاج داشتم که از نمودارها برای آمارگیری استفاده کنم، هرچی گشتم یه آموزش کامل فارسی پیدا نکردم و مجبور شدم خودم بشینم کامل یاد بگیرم، حالا میخوام این تجربیات رو در اختیار دیگر دوستان هم بذارم،

با توجه به نظرات دوستان آموزش رو از پستهای پایینتر شروع میکنیم. :چشمک: 

دوستان دقت داشته باشن برای دسترسی راحت تر پستهای این آموزش شماره گذاری شده.

----------


## sajadjamalian

(1)
(بسمه)
سلام دوستان:
ممنون از نظراتتون، انشاالله با کمک دوستان تا آخر ادامه میدیم،
برای شروع باید بگم که ابزار MSCHART ابزاری رایگان هست که میتونید اون رو از لینک زیر از سایت مایکروسافت دانلود کنید و نصب کنید:
http://www.microsoft.com/downloads/e...displaylang=en

----------


## sajadjamalian

(2)
در ابتدا برای آشنایی با این نمودارها عناصری که توی نمودار هست رو باید یاد بگیریم که توی عکس های زیر این عناصر مشخص شده اند:
1.JPG
و
2.JPG

برای رسم یه نمودار باید با عناصر بالا کار کرد، که توی پست های بعدی توضیحات لازم رو برای کار با هرکدوم توضیح میدم.

----------


## sajadjamalian

(3)
برای کشیدن یه نمودار ساده میتونید از کدهای زیر استفاده کنید، فقط باید در ابتدا از using زیر استفاده کنید:
using System.Windows.Forms.DataVisualization.Charting;
رسم نمودار:
private void DynamicChartCreation_Load(object sender, System.EventArgs e)
{
    // Create a Chart
    chart1 = new Chart();

    // Create Chart Area
    ChartArea chartArea1 = new ChartArea();

    // Add Chart Area to the Chart
    chart1.ChartAreas.Add(chartArea1);

    // Create a data series
    Series series1 = new Series();
    Series series2 = new Series();

    // Add data points to the first series
    series1.Points.Add(34);
    series1.Points.Add(24);
    series1.Points.Add(32);
    series1.Points.Add(28);
    series1.Points.Add(44);

    // Add data points to the second series
    series2.Points.Add(14);
    series2.Points.Add(44);
    series2.Points.Add(24);
    series2.Points.Add(32);
    series2.Points.Add(28);

    // Add series to the chart
    chart1.Series.Add(series1);
    chart1.Series.Add(series2);

    // Set chart control location
    chart1.Location = new System.Drawing.Point(16, 48);

    // Set Chart control size
    chart1.Size = new System.Drawing.Size(360, 260);

    // Add chart control to the form
    this.Controls.AddRange(new System.Windows.Forms.Control[] { this.chart1 });
            
}

----------


## sajadjamalian

(4)
خب با توجه به کد بالا متوجه میشیم که توی تمام نمودارها حداقل باید یک chartarea و series تعریف کنیم،(و اونارو به نمودار اضافه کنیم) وبعد میتونیم با استفاده از series (که همون ستون های نمودارمون هست) داده هایی رو به نمودار اضافه کنیم،

حالا میخوام یه توضیحاتی درباره series ها بدم:

با استفاده از series ها میشه نوع نمودارها رو عوض کرد مثلا(ستونی، میله ای، دایره ای، هرمی،نقطه ای و ...) که بنا به نیاز باید از اون ها استفاده کرد،
وقتی نمودار رو ساختیم اونوقت باید series ها رو عوض کنیم، که چند نمونه کدهاش رو براتون میذارم:

نقطه ای:
chart1.Series["Series1"].ChartType = SeriesChartType.Bubble;
3.JPG
میله ای:
Chart1.Series["Default"].ChartType = SeriesChartType.Bar;
4.JPG
خطی:
chart1.Series["Series1"].ChartType = SeriesChartType.Line;
5.JPG
ناحیه ای:
chart1.Series["Series2"].ChartType = SeriesChartType.Area;
6.JPG
و...

----------


## sajadjamalian

(5)
خب حالا یه خصوصیت در مورد chartarea :
با استفاده از کدهای زیر میتونید نمودارتون رو سه بعدی(3D) کنید:
// show the chart in 3D
chart1.ChartAreas["Default"].Area3DStyle.Enable3D = true;

// set the Rotation value
chart1.ChartAreas["Default"].Area3DStyle.Rotation = 30;
    
// set the Inclination value
chart1.ChartAreas["Default"].Area3DStyle.Inclination = 40;

// set the wall width for the axis
chart1.ChartAreas["Default"].Area3DStyle.WallWidth = 7;

----------


## sajadjamalian

(6)
یه خاصیت جالب برای نمودارهای MSCHART این هست که میتونیم روی اونها zoom داشته باشیم،(البته نمودار باید در حالت دوبعدی باشه)،
برای اینکه به این خاصیت دسترسی داشته باشیم باید از کدهای زیر استفاده کنیم:
// Enable range selection and zooming end user interface
chart1.ChartAreas["Default"].CursorX.IsUserEnabled = true;
chart1.ChartAreas["Default"].CursorX.IsUserSelectionEnabled = true;
chart1.ChartAreas["Default"].AxisX.ScaleView.Zoomable = true;
chart1.ChartAreas["Default"].AxisX.ScrollBar.IsPositionedInside = true;

----------


## sajadjamalian

(7)
(حرفه ای)
دوستان برای اینکه بتونید جزئیات نمودار رو در سمتی از نمودار داشته باشید، باید از legend ها استفاده کنید، این رو هم مانند series باید تعریف کنید و بعد به نمودارتون اضافه کنید:
Legend1 = new Legend();
            this.Chart1.Legends.Add(legend1);ولی در این صورت به صورت خودکار چیزی رو مشاهده نمیکنید و باید کدهای زیر رو به نمودارتون اضافه کنید:
توجه داشته باشید که با استفاده از کدهای زیر به هرکدام از ستونهای نمودارتون یه رنگ منحصربفرد اختصاص داده میشه که اونارو میتونید توی legend مشاهده کنید:

chart1.Series["series1"].Palette = ChartColorPalette.BrightPastel;
                                chart1.Series["series1"].IsVisibleInLegend = false;
                                chart1.ApplyPaletteColors();
foreach (DataPoint dp in chart1.Series["series1"].Points)
{
                                    chart1.Legends["legend1"].CustomItems.Add(dp.Color, dp.AxisLabel);
                                }

----------


## sajadjamalian

(8)
(حرفه ای)
الان میخوام نحوه اتصال نمودار رو به جدولی از دیتابیس براتون توضیح بدم،(Data Binding a Table)
در کد زیر من از دیتابیسی استفاده کردم که جدولی به نام REPS دارد و این جدول ستونهایی به نام name,sales دارد،
// Define the database query    
string mySelectQuery="SELECT Name, Sales FROM REPS;";

// Create a database connection object using the connection string    
OleDbConnection myConnection = new OleDbConnection(myConnectionString);

// Create a database command on the connection using query    
OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);

// Open the connection    
myCommand.Connection.Open();

// Create a database reader    
OleDbDataReader myReader = myCommand.ExecuteReader(CommandBehavior.CloseConne  ction);

// Since the reader implements and IEnumerable, pass the reader directly into
// the DataBindTable method with the name of the Column to be used as the XValue
Chart1.DataBindTable(myReader, "Name");

// Close the reader and the connection
myReader.Close();
myConnection.Close();
7.JPG

----------


## sajadjamalian

(9)
(حرفه ای)
الان میخوام نحوه اتصال نمودار رو به جدولی از دیتابیس براتون توضیح بدم،(data source binding)
در کد زیر من از دیتابیسی استفاده کردم که جدولی به نام REPS دارد و این جدول ستونهایی به نام name,sales دارد،
// Define the database query    
string mySelectQuery="SELECT * FROM REPS;";

// Create a database connection object using the connection string    
OleDbConnection myConnection = new OleDbConnection(myConnectionString);

// Create a database command on the connection using query    
OleDbCommand myCommand = new OleDbCommand(mySelectQuery, myConnection);

// Set chart data source
chart1.DataSource = myCommand;

// Set series members names for the X and Y values 
chart1.Series["Series 1"].XValueMember = "Name";
chart1.Series["Series 1"].YValueMembers = "Sales";

// Data bind to the selected data source
chart1.DataBind();

8.JPG

----------


## sajadjamalian

(10)
برای اینکه عدد هر ستون روی اون ستون نوشته بشه باید از کد زیر استفاده کنید:
// Show data points values as labels
chart1.Series["Series1"].IsValueShownAsLabel = true;

البته شما میتونید به صورت دستی هم برای هر کدوم از ستونها عدد یا رشته ای رو بنویسید که روی اون نوشته بشه:
برای مثال:
// Set data point label
chart1.Series["Series1"].Points[2].Label = "My Point Label\nLabel Line #2";

----------


## sajadjamalian

(11)
(حرفه ای)

نمودارهای MSCHART در حالت سه بعدی یه خاصیت خیلی جالب دارن و اونم اینه که میشه با  استفاده از یه تایمر و کدهای زیر که باید توی timer_tick نوشته بشن، اونارو به چرخش در آورد،

حتما امتحان کنید چون خیلی جالبه:

if(chart1.ChartAreas[0].Area3DStyle.Rotation <= 177)
                chart1.ChartAreas[0].Area3DStyle.Rotation += 3;
            else
                chart1.ChartAreas[0].Area3DStyle.Rotation = -180; 

دقت کنید مثلا در form_load برنامه باید timer رو فعال کنید، اونوقت نمودار به صورت انیمیشنی جالب شروع به چرخیدن میکنه.

----------


## sajadjamalian

(12)
(حرفه ای)
کدهای پرینت و ذخیره نمودار به صورت عکس:

پرینت:
// Show Page Setup dialog
chart1.Printing.PageSetup();

// Print preview chart
chart1.Printing.PrintPreview();

// Print chart (without Printer dialog)
chart1.Printing.Print(false);

ذخیره به صورت عکس :
private void Save_Click(object sender, System.EventArgs e)
{
    // Create a new save file dialog
    SaveFileDialog saveFileDialog1 = new SaveFileDialog();

    // Sets the current file name filter string, which determines 
    // the choices that appear in the "Save as file type" or 
    // "Files of type" box in the dialog box.
    saveFileDialog1.Filter = "Bitmap (*.bmp)|*.bmp|JPEG (*.jpg)|*.jpg|EMF (*.emf)|*.emf|PNG (*.png)|*.png|SVG (*.svg)|*.svg|GIF (*.gif)|*.gif|TIFF (*.tif)|*.tif";
    saveFileDialog1.FilterIndex = 2 ;
    saveFileDialog1.RestoreDirectory = true ;

    // Set image file format
    if(saveFileDialog1.ShowDialog() == DialogResult.OK)
    {
        ChartImageFormat format = ChartImageFormat.Bmp;

        if( saveFileDialog1.FileName.EndsWith( "bmp" ) )
        {
            format = ChartImageFormat.Bmp;
        }
        else if( saveFileDialog1.FileName.EndsWith( "jpg" ) )
        {
            format = ChartImageFormat.Jpeg;
        }
        else if( saveFileDialog1.FileName.EndsWith( "emf" ) )
        {
            format = ChartImageFormat.Emf;
        }
        else if( saveFileDialog1.FileName.EndsWith( "gif" ) )
        {
            format = ChartImageFormat.Gif;
        }
        else if( saveFileDialog1.FileName.EndsWith( "png" ) )
        {
            format = ChartImageFormat.Png;
        }
        else if( saveFileDialog1.FileName.EndsWith( "tif" ) )
        {
            format = ChartImageFormat.Tiff;
        }
        else if( saveFileDialog1.FileName.EndsWith( "svg" ) )
        {
            format = ChartImageFormat.Svg;
        }

        // Save image
        Chart1.SaveImage( saveFileDialog1.FileName, format );
    }
}

----------


## sajadjamalian

(13)

با کدهای زیر میتونید max و min داده ها در نمودار رو پیدا کنید و ستون هاشون رو تغییر رنگ بدید:
// Find point with maximum Y value and change color
DataPoint maxValuePoint = chart1.Series["Series1"].Points.FindMaxValue();
maxValuePoint.Color = Color.FromArgb(255, 128, 128);
                                                                                            
// Find point with minimum Y value and change color
DataPoint minValuePoint = chart1.Series["Series1"].Points.FindMinValue();
minValuePoint.Color = Color.FromArgb(128, 128, 255);

9.JPG

----------


## sajadjamalian

سلام دوستان:
آموزش های بالا رو توی یه فایل word جمع آوری کردم که بتونید راحت تر دسترسی داشته باشید:

----------


## f.beigirad

سلام دوستان:

*طریقه تعیین Minimum و Maximum محور Y یک چارت:*

Axis ax = new Axis();
                ax.Minimum = 0;
                ax.Maximum = 10;
                area.AxisY = ax;  

شما بعد از تعریف area ، یه Axis تعریف میکنید و برای اون Maximum , Minimumتعریف میکنید و اونو به area نسبت میدین.

موفق باشید

----------


## f.beigirad

سلام دوستان.من به صورت تخصصی روی چارت کار نمیکنم ولی هرجا به هر مشکلی برمیخورم دنبال راه حل میگردم و وقتی پیدا کردم میذارم روی این سایت:

تغییر رنگ خط های عمودی و افقی یه ناحیه(area):

area.AxisX.MajorGrid.LineColor = Color.Red;
            area.AxisY.MajorGrid.LineColor = Color.Green;

و تغییر پهنای این خط ها:

area.AxisX.MajorGrid.LineWidth = 3;
            area.AxisY.MajorGrid.LineWidth = 4;


موفق باشید//

----------


## phoenix2000

1- یکی از راه‌های تغییر زوم نمودار بر روی مثلاً محور x استفاده از کد زیر است:chartTrend.ChartAreas[0].AxisX.ScaleView.Size *= 2; در کد مذکور با هر بار فراخوانی زوم نمودار نصف می‌شود. به طریق مشابه اگر بر 2 تقسیم شود دو برابر بر روی نمودار زوم می‌شود. و اگر مقدار ثابتی و پیش فرضی برای زوم در نظر دارید می‌توانید آن را برابر با آن مقدار بگذارید.
2-  کدهای زیر باعث می‌شوند تا ما اسکرول بار ساده درون نمودار داشته باشیم.


chartTrend.ChartAreas[0].AxisX.ScrollBar.ButtonStyle = ScrollBarButtonStyles.SmallScroll;
            chartTrend.ChartAreas[0].AxisX.ScrollBar.IsPositionedInside = true;
            chartTrend.ChartAreas[0].AxisX.ScrollBar.Enabled = true;
3- در نهایت نکته ای که خودش خیلی وقت من رو گرفت این بود که بعد از اضافه کردن نقطه به نمودار تا قبل از کلیک بر روی اسکرول نمودار نشان داده نمی‌شد. بعد از کلی کلنجار فهمیدم که مشکل از اسکرول است که در جای نا مناسب قرار دارد و باید بعد از اضافه کردن چند نقطه دیتا به نمودار آن را به ابتدای این نقاط کشاند. با استفاده از :chartTrend.ChartAreas[0].AxisX.ScaleView.Position = chartTrend.ChartAreas[0].AxisX.Minimum;
پی نوشت:
کنترل چارت در سی شارپ بسیار گسترده است و خیلی نکات دارد. به نظرم این تاپیک میتونه به یک مرجع خوب برای نکاتی که افراد در حین کار با این کنترل یاد میگیرند شود.

----------

