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

مراحل رسم نمودار خطی در ASP.Net

627 بازدید
نمودار خطی

نمودار خطی

در این مقاله در مورد انواع مختلف نمودار های خطی و … ASP.Net که یک UI قدرتمند و کیفیت طراحی خوب برای ما فراهم می کنند آشنا می شویم. همه ی نمودارها در System.Web.UI.DataVisualization.Charting namespace می باشند. با من همراه باشید …

نمودار خطی

جدول داده ها با استفاده از نکات زیر نشان داده شده است.

محور X : خط های افقی نمودار محور X نامیده می شوند.

محور Y :خط های عمودی نمودار محور Y نامیده می شوند.

قدم اول: یک جدول برای اطلاعات نمودار ایجاد کنید.

اکنون قبل از ایجاد اپلیکیشن، یک جدول با نام orderdet در پایگاه داده ایجاد می کنیم از جایی که record ها را در نمودار نشان دادیم، جدول کد زیر را خواهد داشت:

USE [CBS]  
GO  
  
/****** Object:  Table [dbo].[QuarterwiseSale]    Script Date: 19-12-2014 00:49:50 ******/  
SET ANSI_NULLS ON  
GO  
SET QUOTED_IDENTIFIER ON  
GO  
  
SET ANSI_PADDING ON  
GO  
  
CREATE TABLE [dbo].[QuarterwiseSale](  
    [id] [int] IDENTITY(1,1) NOT NULL,  
    [Quarter] [varchar](50) NULL,  
    [SalesValue] [money] NULL,  
 CONSTRAINT [PK_QuarterwiseSale] 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 ANSI_PADDING OFF  
GO  

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

نمودار خطی

اکنون چند عدد record مانند لیست تصویر زیر وارد کنید:

نمودار خطی

قدم دوم: ایجاد وب اپلیکیشن

اکنون پروژه را به صورت زیر ایجاد کنید:

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

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

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

روی Solution Explorer کلیک راست کنید و Add New Item انتخاب کنید و سپس صفحه Default.aspx را انتخاب کنید.

Chart control را از ToolBox به صفحه Default.aspx، Drag کنید.

حالا سورس کد 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="blue">  
    <form id="form1" runat="server">  
    <h4 style="color: White;">  
        Article for C#Corner  
    </h4>  
    <asp:Chart ID="Chart1" runat="server" BackColor="64, 0, 0"   
        BackGradientStyle="LeftRight" Height="350px" Palette="None"   
        PaletteCustomColors="192, 0, 0" Width="350px">  
        <Series>  
            <asp:Series Name="Series1">  
            </asp:Series>  
        </Series>  
        <ChartAreas>  
            <asp:ChartArea Name="ChartArea1" >  
            </asp:ChartArea>  
        </ChartAreas>  
        <BorderSkin BackColor="" PageColor="192, 64, 0" />  
    </asp:Chart>  
  
  
    </form>  
</body>  
</html> 

قدم سوم: ایجاد متد برای bind کردن کنترل نمودار

نکته مهم و پیچیده bind کردن کنترل نمودار به روش صحیح و به درستی می باشد، چرا که نمودار ها به صورت سری های تو در تو می باشند پس تنظیم کردن مقادیر آنها کمی مشکل می باشد و به دقت نیاز دارد.

اکنون صفحه default.aspx.cs را باز کنید و قابلیت زیر را با اسم Bindchart برای bind کردن نمودار ایجاد کنید:

private void Bindchart()  
    {  
        connection();  
        query = "select *from Orderdet";//not recommended this i have written just for example,write stored procedure for security  
        com = new SqlCommand(query, con);  
        SqlDataAdapter da = new SqlDataAdapter(query, con);  
        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.Line ;  
      // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
      // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
     //  Chart1.Series[0].ChartType = SeriesChartType.Spline;  
      //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  
          
        con.Close();  
  
    }  

تمام کد صفحه 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();  
        query = "select *from Orderdet";//not recommended this i have written just for example,write stored procedure for security  
        com = new SqlCommand(query, con);  
        SqlDataAdapter da = new SqlDataAdapter(query, con);  
        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.Line ;  
      // Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
      // Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false;  
     //  Chart1.Series[0].ChartType = SeriesChartType.Spline;  
      //Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  
  
          
        con.Close();  
  
    }  
} 

اکنون، entire logic را برای bind کردن نمودار از پایگاه داده داریم، اپلیکیشن را اجرا می کنیم. نمودار به صورت زیر خواهد شد:

نمودار خطی

ممکن است بعضی اوقات بخواهیم GridLine های نمودار مخفی شوند، برای مخفی کردن آنها کد زیر را uncomment کنید.

Chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.Enabled = false;  
Chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.Enabled = false; 

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

نمودار خطی

هم چنین می توانیم ضخامت (عرض، پهنا) ی آن را به صورت زیر تغییر دهیم:

/Setting width of line  
  Chart1.Series[0].BorderWidth = 1;

اکنون به نمودار نگاه کنید.

نمودار خطی

اکنون آن را به صورت زیر به حالت Spline در می آوریم:

//setting Chart type   
 Chart1.Series[0].ChartType = SeriesChartType.Spline ;  

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

نمودار خطی

نمودار قبل یک Spline ساده بود. اکنون به روش زیر حالت سه بعدی آن را فعال می کنیم.

/Setting width of line    
 Chart1.ChartAreas["ChartArea1"].Area3DStyle.Enable3D = true;  

اپ را اجرا کنید و حالت سه بعدی فعال شده است.

نمودار خطی

موفق باشید !

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

نظرات

0 نظر در مورد مراحل رسم نمودار خطی در ASP.Net

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

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

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