（1）熟悉一下画柱状图和饼图类

      用.net画柱状图和饼图是比较简单的，下面我们来熟悉System.Drawing和System.Drawing.Imaging这两个类。通过下面两个小例子，熟悉一下，这两个类的应用。
1、例子一代码如下：

   protected   void  Page_Load( object  sender, EventArgs e)
         {
            //添加一个画布
            Bitmap bm = new Bitmap(378, 461);
            Graphics g;
            g = Graphics.FromImage(bm);
            g.Clear(Color.White);

            //画标题
            g.DrawString("访问者地区（今日详情）", new Font("宋体", 9), Brushes.Black, new Point(5, 5));

            //画列表项
            g.DrawString("共 57 项  访问量  比列", new Font("宋体", 9), Brushes.Black, new Point(110, 30));


            Color link = Color.FromArgb(114, 125, 145);//标准线颜色
            g.DrawLine(new Pen(link), new Point(103, 48), new Point(250, 48));

            g.DrawString("广东     357    14.5%", new Font("宋体", 9), Brushes.Black, new Point(115, 60));
            g.DrawString("福建     300      10%", new Font("宋体", 9), Brushes.Black, new Point(115, 75));
            g.DrawString("上海     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 90));
            g.DrawString("福建     300      10%", new Font("宋体", 9), Brushes.Black, new Point(115, 105));
            g.DrawString("上海     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 120));
            g.DrawString("福建     300      10%", new Font("宋体", 9), Brushes.Black, new Point(115, 135));
            g.DrawString("上海     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 150));
            g.DrawString("福建     300      10%", new Font("宋体", 9), Brushes.Black, new Point(115, 165));
            g.DrawString("福建     300      10%", new Font("宋体", 9), Brushes.Black, new Point(115, 180));
            g.DrawString("上海     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 195));
            g.DrawString("福建     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 210));
            g.DrawString("上海     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 225));
            g.DrawString("福建     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 240));
            g.DrawString("福建     250      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 255));
            g.DrawString("上海      25      17%", new Font("宋体", 9), Brushes.Black, new Point(115, 270));
            g.DrawString("福建      25     1.1%", new Font("宋体", 9), Brushes.Black, new Point(115, 285));

            //设置边框的颜色
            Color bzlink = Color.FromArgb(185, 185, 185);//标准线颜色

            //矩形上边
            g.DrawLine(new Pen(bzlink), new Point(260, 50), new Point(340, 50));

            //矩形左边
            g.DrawLine(new Pen(bzlink), new Point(260, 50), new Point(260, 300));

            //矩形右边
            g.DrawLine(new Pen(bzlink), new Point(340, 50), new Point(340, 300));



            //填充背景的颜色
            SolidBrush bBrush = new SolidBrush(Color.FromArgb(243,243,243));
            //SolidBrush greebrush=new SolidBrush(Color.FromName("red"));

            //填充第一个色块
            g.FillRectangle(bBrush, 281, 51, 19, 249);
        
            //真充第二个色块
            g.FillRectangle(bBrush, 321, 51, 18, 249);


            //画棒图
            SolidBrush barBrush = new SolidBrush(Color.FromArgb(9, 57, 121));

            g.FillRectangle(barBrush, 261, 61, 79, 7);
            g.FillRectangle(barBrush, 261, 76, 70, 7);
            g.FillRectangle(barBrush, 261, 91, 55, 7);
            g.FillRectangle(barBrush, 261, 106, 20, 7);
            g.FillRectangle(barBrush, 261, 121, 15, 7);
            g.FillRectangle(barBrush, 261, 136, 13, 7);
            g.FillRectangle(barBrush, 261, 151, 10, 7);
            g.FillRectangle(barBrush, 261, 166, 10, 7);
            g.FillRectangle(barBrush, 261, 181, 9, 7);
            g.FillRectangle(barBrush, 261, 196, 9, 7);
            g.FillRectangle(barBrush, 261, 211, 9, 7);
            g.FillRectangle(barBrush, 261, 226, 9, 7);
            g.FillRectangle(barBrush, 261, 241, 8, 7);
            g.FillRectangle(barBrush, 261, 256, 8, 7);
            g.FillRectangle(barBrush, 261, 271, 8, 7);
            g.FillRectangle(barBrush, 261, 286, 8, 7);




            bm.Save(Response.OutputStream, ImageFormat.Gif);


           
        }

运行上面程序，显示结果如下：
      
注意：Color.FromArgb（）方法可以自定义颜色。也可以Color的属性获取FCL自带的颜色。 
 2、例子源码如下：

       // 添加一个画布
            Bitmap bm  =   new  Bitmap( 505 ,  172 );
            Graphics g;
            g  =  Graphics.FromImage(bm);
            g.Clear(Color.White);

             // 画标题
            g.DrawString( " 流量信息（今日详情） " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 5 ,  5 ));


             // 画边框
            Color bzlink  =  Color.FromArgb( 185 ,  185 ,  185 ); // 标准线颜色
            Pen p  =   new  Pen( new  SolidBrush(bzlink));
            g.DrawRectangle( p,  90 ,  30 ,  380 ,  100 );


            g.DrawRectangle(p,  150 ,  155 ,  10 ,  10 ); // 单位(订阅)
            g.DrawRectangle(p,  270 ,  155 ,  10 ,  10 ); // 单位(下载)

            g.DrawString( "    0 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 62 ,  128 ));
            g.DrawString( "  700 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 62 ,  103 ));
            g.DrawString( " 1400 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 62 ,  78 ));
            g.DrawString( " 2100 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 62 ,  53 ));
            g.DrawString( " 2800 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 62 ,  28 ));


             // 填充背景的颜色
            SolidBrush bBrush  =   new  SolidBrush(Color.FromArgb( 243 ,  243 ,  243 ));
             // SolidBrush greebrush=new SolidBrush(Color.FromName("red"));

             // 填充第一个色块
            g.FillRectangle(bBrush,  91 ,  31 ,  378 ,  24 );

             // 真充第二个色块
            g.FillRectangle(bBrush,  91 ,  80 ,  378 ,  25 );


             // 画棒图
            SolidBrush barBrushR  =   new  SolidBrush(Color.FromArgb( 9 ,  57 ,  121 ));
            SolidBrush barBrushD  =   new  SolidBrush(Color.FromArgb( 182 ,  202 ,  249 ));


            g.FillRectangle(barBrushR,  150 ,  155 ,  10 ,  10 ); // 单位(订阅)
            g.DrawString( " 订阅量  2578 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 165 ,  155 ));

            g.FillRectangle(barBrushD,  271 ,  156 ,  9 ,  9 ); // 单位(订阅)
            g.DrawString( " 下载量  256871 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 285 ,  155 ));




             棒图 #region 棒图

            g.FillRectangle(barBrushR, 100, 110, 10, 20);
            g.FillRectangle(barBrushD, 100, 30, 10, 80);


            
            g.FillRectangle(barBrushD, 120, 50, 10, 40);
            g.FillRectangle(barBrushR, 120, 90, 10, 40);

            g.FillRectangle(barBrushD, 140, 50, 10, 40);
            g.FillRectangle(barBrushR, 140, 90, 10, 40);

            g.FillRectangle(barBrushD, 160, 50, 10, 40);
            g.FillRectangle(barBrushR, 160, 90, 10, 40);

            g.FillRectangle(barBrushD, 180, 50, 10, 40);
            g.FillRectangle(barBrushR, 180, 90, 10, 40);

            g.FillRectangle(barBrushD, 200, 50, 10, 40);
            g.FillRectangle(barBrushR, 200, 90, 10, 40);

            g.FillRectangle(barBrushD, 220, 50, 10, 40);
            g.FillRectangle(barBrushR, 220, 90, 10, 40);

            g.FillRectangle(barBrushD, 240, 50, 10, 40);
            g.FillRectangle(barBrushR, 240, 90, 10, 40);


            g.FillRectangle(barBrushD, 260, 50, 10, 40);
            g.FillRectangle(barBrushR, 260, 90, 10, 40);

            g.FillRectangle(barBrushD, 280, 50, 10, 40);
            g.FillRectangle(barBrushR, 280, 90, 10, 40);

            g.FillRectangle(barBrushD, 300, 50, 10, 40);
            g.FillRectangle(barBrushR, 300, 90, 10, 40);


            g.FillRectangle(barBrushD, 320, 50, 10, 40);
            g.FillRectangle(barBrushR, 320, 90, 10, 40);

            g.FillRectangle(barBrushD, 340, 50, 10, 40);
            g.FillRectangle(barBrushR, 340, 90, 10, 40);

            g.FillRectangle(barBrushD, 360, 50, 10, 40);
            g.FillRectangle(barBrushR, 360, 90, 10, 40);

            g.FillRectangle(barBrushD, 380, 50, 10, 40);
            g.FillRectangle(barBrushR, 380, 90, 10, 40);

            g.FillRectangle(barBrushD, 400, 50, 10, 40);
            g.FillRectangle(barBrushR, 400, 90, 10, 40);

            g.FillRectangle(barBrushD, 420, 50, 10, 40);
            g.FillRectangle(barBrushR, 420, 90, 10, 40);

            #endregion

            g.DrawString( " 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 " ,  new  Font( " 宋体 " ,  9 ), Brushes.Black,  new  Point( 100 ,  135 ));

            bm.Save(Response.OutputStream, ImageFormat.Gif);

运行这段代码显示如下：
      
源代码： 下载地址
通过这两个小程序，可以熟悉System.Drawing和System.Drawing.Imaging这两个类。接下来的教程会和数据库查询结合在一起。