PDA

View Full Version : آموزش: آموزش رسم نمودار در سی شارپ به وسیله MSCHART



sajadjamalian
یک شنبه 10 بهمن 1389, 22:34 عصر
سلام دوستان:
توی یکی از پروژه هام احتیاج داشتم که از نمودارها برای آمارگیری استفاده کنم، هرچی گشتم یه آموزش کامل فارسی پیدا نکردم و مجبور شدم خودم بشینم کامل یاد بگیرم، حالا میخوام این تجربیات رو در اختیار دیگر دوستان هم بذارم،

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

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

sajadjamalian
دوشنبه 11 بهمن 1389, 09:21 صبح
(1)
(بسمه)
سلام دوستان:
ممنون از نظراتتون، انشاالله با کمک دوستان تا آخر ادامه میدیم،
برای شروع باید بگم که ابزار MSCHART ابزاری رایگان هست که میتونید اون رو از لینک زیر از سایت مایکروسافت دانلود کنید و نصب کنید:
http://www.microsoft.com/downloads/en/details.aspx?FamilyId=130F7986-BF49-4FE5-9CA8-910AE6EA442C&displaylang=en

sajadjamalian
دوشنبه 11 بهمن 1389, 09:27 صبح
(2)
در ابتدا برای آشنایی با این نمودارها عناصری که توی نمودار هست رو باید یاد بگیریم که توی عکس های زیر این عناصر مشخص شده اند:
65753
و
65754

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

sajadjamalian
دوشنبه 11 بهمن 1389, 09:49 صبح
(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
دوشنبه 11 بهمن 1389, 16:48 عصر
(4)
خب با توجه به کد بالا متوجه میشیم که توی تمام نمودارها حداقل باید یک chartarea و series تعریف کنیم،(و اونارو به نمودار اضافه کنیم) وبعد میتونیم با استفاده از series (که همون ستون های نمودارمون هست) داده هایی رو به نمودار اضافه کنیم،

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

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

نقطه ای:

chart1.Series["Series1"].ChartType = SeriesChartType.Bubble;
65777
میله ای:

Chart1.Series["Default"].ChartType = SeriesChartType.Bar;
65778
خطی:

chart1.Series["Series1"].ChartType = SeriesChartType.Line;
65779
ناحیه ای:

chart1.Series["Series2"].ChartType = SeriesChartType.Area;
65780
و...http://barnamenevis.org/images/misc/pencil.png

sajadjamalian
دوشنبه 11 بهمن 1389, 20:23 عصر
(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
سه شنبه 12 بهمن 1389, 08:53 صبح
(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
سه شنبه 12 بهمن 1389, 12:22 عصر
(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
سه شنبه 12 بهمن 1389, 14:36 عصر
(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();
65834
http://barnamenevis.org/images/misc/pencil.png

sajadjamalian
سه شنبه 12 بهمن 1389, 14:39 عصر
(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();

65835
http://barnamenevis.org/images/misc/pencil.png

sajadjamalian
سه شنبه 12 بهمن 1389, 16:41 عصر
(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
چهارشنبه 13 بهمن 1389, 09:13 صبح
(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
پنج شنبه 14 بهمن 1389, 00:45 صبح
(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
پنج شنبه 14 بهمن 1389, 16:36 عصر
(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);

65911
http://barnamenevis.org/images/misc/pencil.png

sajadjamalian
پنج شنبه 21 بهمن 1389, 18:59 عصر
سلام دوستان:
آموزش های بالا رو توی یه فایل word جمع آوری کردم که بتونید راحت تر دسترسی داشته باشید:

f.beigirad
سه شنبه 22 اسفند 1391, 19:00 عصر
سلام دوستان:

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

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

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

موفق باشید

f.beigirad
پنج شنبه 24 اسفند 1391, 10:29 صبح
سلام دوستان.من به صورت تخصصی روی چارت کار نمیکنم ولی هرجا به هر مشکلی برمیخورم دنبال راه حل میگردم و وقتی پیدا کردم میذارم روی این سایت:

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

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

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

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


موفق باشید//

phoenix2000
یک شنبه 10 دی 1396, 11:03 صبح
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;


پی نوشت:
کنترل چارت در سی شارپ بسیار گسترده است و خیلی نکات دارد. به نظرم این تاپیک میتونه به یک مرجع خوب برای نکاتی که افراد در حین کار با این کنترل یاد میگیرند شود.