ورود / ثبت نام
0
0

نمودار حبابی و مراحل ایجاد آن در ASP.NET

417 بازدید

نمودار حبابی

امروز کنترل قدم به قدم نمودار حبابی در ASP.Net را به شما آموزش می دهیم. اکنون ویژگی های نمودار حبابی را برای شما توضیح می دهیم، ویژگی های رایج یک نمودار حبابی در ادامه ی مطلب برایتان آورده شده است . پس با من همراه باشید …

نمودار حبابی

متن جایگزین / AlterNet Text: وقتی تصویر مناسبی برای نمودار نداریم متن جایگزین تنظیم می شود.

حاشیه نویسی / Annotation: حاشیه های نموداری را تنظیم و ذخیره می کند.

خوش نما سازی / Antialiasing: مقادیری معین می کند که anti-aliasing زمانی استفاده مشود که تصویر و متن کشیده شده باشند.

سبک BackGradientStyle: برای زمینه کنترل نمودار حبابی جهت و گرایش تعیین می کند.

Backcolor: برای نمودار رنگ زمینه انتخاب میکند، رنگ پیش فرض آن سفید می باشد.

BackImage: برای کنترل نمودار تصویر (BackImage) انتخاب می کند.

BackHatchStyle: سایه های نمودار را کنترل می کند. به صورت پیش فرض فعال نیست.

ارتفاع / Height: ارتفاع نمودار را کنترل می کند.

پهنا / Width: پهنا ی نمودار را کنترل می کند.

رنگ نقاشی / Palette: مدل و رنگ نمودار را تنظیم می کند، سبک پیش فرض آن شکلات (Chocolate) می باشد.

PaletteCustomColors: رنگ های نمودار شما را سفارشی می کند.

Series: مجموعه های نمودار را تنظیم می کند.

Legends: مجموعه Legends های نمودار را تنظیم می کند.

اکنون با ابجاد یک وب اپلیکشین ساده توضیحات قبل را به شما نشان می دهیم.

قدم اول

با استفاده از کد زیر یک جدول برای نمودار ایجاد کنید:

CREATE TABLE [dbo].[orderdet](    
    [id] [int] IDENTITY(1,1) NOT NULL,    
    [Month] [varchar](50) NULL,    
    [Orders] [int] NULL,    
 CONSTRAINT [PK_Order Table] PRIMARY KEY CLUSTERED     
(    
    [id] ASC    
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]    
) ON [PRIMARY]    
    
GO

و حالا طرح شما به صورت زیر خواد شد:

نمودار حبابی

حالا رکورد ها را با استفاده از کد زیر وارد کنید:

SET IDENTITY_INSERT [dbo].[orderdet] ON             
            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (1, N'Jan', 0)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (2, N'Feb', 5)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (3, N'March', 20)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (4, N'April', 40)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (5, N'May', 15)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (6, N'Jun', 60)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (7, N'July', 75)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (8, N'Aug', 80)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (9, N'Sep', 85)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (10, N'Oct', 100)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (11, N'Nov', 2)            
GO            
INSERT [dbo].[orderdet] ([id], [Month], [Orders]) VALUES (12, N'Dec', 90)            
GO            
SET IDENTITY_INSERT [dbo].[orderdet] OFF  

بعد از اجرای کد جدول به صورت زیر خواهد شد:

نمودار حبابی

قدم دوم

اکنون یک روش ذخیره شده (Stored Procedure) برای آوردن (fetch) رکورد ها از پایگاه داده ایجاد کنید.

Create procedure [dbo].[GetCharData]            
(            
@id int =null            
            
)            
as            
begin            
Select Month,Orders from Orderdet            
End   

قدم سوم

یک وب اپلیکیشن بسازید. وب سایت را بسازید با:

Start” – “All Programs” – “Microsoft Visual Studio 2010″”

File” – “New Project” – “C#” – “Empty Website””

برای پروژه یک اسم ماننده (UsingBubbleChart) و یا اسم مورد مناسب دیگر انتخاب و محل آن را مشخص کنید.

سپس روی Solution Explorer کلیک راست کنید و Add New Item را انتخاب کنید و در آخر Default.aspx page را انتخاب کنید.

از جعبه ابزار (ToolBox) خود یک نمودار کنترل به صفحه the Default.aspx Drag and Drop (بکشید و بیاورید) کنید.

اکنون سورس کد Default.aspx به صورت زیر خواهد شد:

Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>    
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"    
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head runat="server">    
    <title>Article by Vithal Wadje</title>    
</head>    
<body bgcolor="black">    
    <form id="form1" runat="server">    
    <h4 style="color: White;">    
        Article for C#Corner    
    </h4>    
    <asp:Chart ID="Chart1" runat="server" BackColor="192, 64, 0" BackGradientStyle="LeftRight"    
        BorderlineWidth="0" Height="360px" Palette="None" PaletteCustomColors="128, 64, 0"    
        Width="380px" BorderlineColor="255, 128, 0">    
        <Series>    
            <asp:Series Name="Series1"  YValuesPerPoint="12">    
            </asp:Series>    
        </Series>    
        <ChartAreas>    
            <asp:ChartArea Name="ChartArea1">    
            </asp:ChartArea>    
        </ChartAreas>    
    </asp:Chart>    
    </form>    
</body>    
</html>  

قدم چهارم:

تمام کد صفحه ی default.aspx.cs به صورت زیر نمایش داده می شود:

using System;    
using System.Collections.Generic;    
using System.Linq;    
using System.Web;    
using System.Web.UI;    
using System.Web.UI.WebControls;    
using System.Data.SqlClient;    
using System.Configuration;    
using System.Data;    
using System.Web.UI.DataVisualization.Charting;    
    
public partial class _Default : System.Web.UI.Page    
{    
    private SqlConnection con;    
    private SqlCommand com;    
    private string constr, query;    
    private void connection()    
    {    
        constr = ConfigurationManager.ConnectionStrings["getconn"].ToString();    
        con = new SqlConnection(constr);    
        con.Open();    
    
    }    
    protected void Page_Load(object sender, EventArgs e)    
    {    
        if (!IsPostBack)    
        {    
            Bindchart();    
    
        }    
    }    
    
    
    private void Bindchart()    
    {    
        connection();    
        com = new SqlCommand("GetCharData", con);    
        com.CommandType = CommandType.StoredProcedure;    
        SqlDataAdapter da = new SqlDataAdapter(com);    
        DataSet ds = new DataSet();    
        da.Fill(ds);    
    
        DataTable ChartData = ds.Tables[0];    
    
        //storing total rows count to loop on each Record    
        string[] XPointMember = new string[ChartData.Rows.Count];    
        int[] YPointMember = new int[ChartData.Rows.Count];    
    
        for (int count = 0; count < ChartData.Rows.Count; count++)    
        {    
            //storing Values for X axis    
            XPointMember[count] = ChartData.Rows[count]["Month"].ToString();    
            //storing values for Y Axis    
            YPointMember[count] = Convert.ToInt32(ChartData.Rows[count]["Orders"]);    
    
    
        }    
        //binding chart control    
        Chart1.Series[0].Points.DataBindXY(XPointMember, YPointMember);    
    
        //Setting width of line    
        Chart1.Series[0].BorderWidth = 1;    
        //setting Chart type     
         Chart1.Series[0].ChartType = SeriesChartType.Bubble;    
         
        //Hide or show chart back GridLines    
  // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;    
  // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;    
    
        //Enabled 3D    
      // Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;    
        con.Close();    
    
    }    
}    

حالا اپلیکیشن را اجرا می کنیم. نمودار حبابی به صورت زیر خواهد بود:

نمودار حبابی

اکنون خط های شبکه ای را به صورت زیر محو می کنیم:

Hide or show chart back GridLines            
Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;            
Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;

و نمودار حبابی ما به صورت زیر می شود:

نمودار حبابی

نمودار حبابی قبل حالت طبیعی و نرمال بود. اکنون حالت ۳D آن را به صورت زیر فعال می کنیم.

//Enabled 3D            
 Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;   

و حالت ۳D به صورت زیر خواهد بود:

نمودار حبابی

می توانید خط های آن را با کد زیر محو کنید:

//Hide or show chart back GridLines              
Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;              
Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false; 

و نمودار به صورت زیر می شود:

نمودار حبابی

موفق باشید !
سوالات و نظراتتان را با من در میان بگذارید !

  • پسورد: www.mspsoft.com
آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=16605
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

0 نظر در مورد نمودار حبابی و مراحل ایجاد آن در ASP.NET

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هیچ دیدگاهی نوشته نشده است.