對(duì)于一些內(nèi)部系統(tǒng)的項(xiàng)目，各種圖表是在所難免的，因?yàn)閳D表可以更加清晰的表達(dá)出想看到的數(shù)據(jù)。

創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、臨邑網(wǎng)絡(luò)推廣、成都微信小程序、臨邑網(wǎng)絡(luò)營(yíng)銷、臨邑企業(yè)策劃、臨邑品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供臨邑建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：www.cdcxhl.com

因?yàn)橹皬膩?lái)沒(méi)有做過(guò)關(guān)于圖表的東西，唯一能想到的就是“驗(yàn)證碼”，所以應(yīng)該是一個(gè)思路，用GDI去搞。

數(shù)據(jù)懶著去搞了，記得前些日子在亞航官網(wǎng)查機(jī)票，就想到這些數(shù)據(jù)還挺適合做這個(gè)DEMO的，所以就先借用一下亞航的數(shù)據(jù)嘍。

數(shù)據(jù)大概就是這樣子的，日期及價(jià)錢(qián)。

我選了其中“9月27日-10月10日”正好兩周的數(shù)據(jù)作為此次Demo的測(cè)試數(shù)據(jù)。

原理就是跟實(shí)現(xiàn)驗(yàn)證碼一模一樣，通過(guò)給標(biāo)簽修改src屬性來(lái)操作柱形圖的變化，src屬性導(dǎo)向的頁(yè)面是另外一個(gè)頁(yè)，非顯示柱形圖本頁(yè)。

然后就是如何利用GDI畫(huà)柱形圖。

先上一下效果圖：

下面看一下部分代碼片段

html代碼：

js代碼：

        $(function () {

            var $pagenum = $("#hf_pagenum");
            var $recordnum = $("#hf_recordnum");

            $("#img_last").click(function () {
                if (parseInt($pagenum.val()) - 1 >= 0) {
                    $pagenum.val(parseInt($pagenum.val()) - 1);
                    $("#img_bar").attr("src", "GenerateImage.aspx?page_num=" + $pagenum.val() + "&from=北京&to=清邁");
                }
            })

            $("#img_next").click(function () {
                if (parseInt($pagenum.val()) + 1 < parseInt($recordnum.val())/7) {
                    $pagenum.val(parseInt($pagenum.val()) + 1);
                    $("#img_bar").attr("src", "GenerateImage.aspx?page_num=" + $pagenum.val() + "&from=北京&to=清邁");
                }
            })

        })

后臺(tái)代碼：

1、一些坐標(biāo)點(diǎn)的聲明

    private readonly int WEEKDAYS = 7;//一周的天數(shù)
    private readonly int Y_UNIT_NUM = 10;
    private readonly int CHAR_X_LEFT = 110;
    private readonly int CHAR_X_TOP = 388;

    private readonly int CHAR_Y_LEFT = 30;
    private readonly int CHAR_Y_TOP = 79;

    private readonly int TITLE_LEFT = 140;//柱形圖標(biāo)題 起始X坐標(biāo)
    private readonly int TITLE_TOP = 18;//柱形圖標(biāo)題 起始Y坐標(biāo)
    private readonly int TIME_LEFT = 170;//柱形圖日期 起始X坐標(biāo)
    private readonly int TIME_TOP = 48;//柱形圖日期 起始Y坐標(biāo)

    private readonly int GRID_X_LEFT = 150;//背景網(wǎng)格 X左邊位移
    private readonly int GRID_X_TOP = 80;//背景網(wǎng)格 X上邊位移
    private readonly int GRID_X_BOTTOM = 380;//背景網(wǎng)格 X下邊位移

    private readonly int GRID_Y_TOP = 110;
    private readonly int GRID_Y_LEFT = 100;
    private readonly int GRID_Y_RIGHT = 580;


    private readonly int GRID_UNIT_WIDTH = 50;//網(wǎng)格單元寬度
    private readonly int GRID_UNIT_HEIGHT = 30;//網(wǎng)格單元高度
    private readonly int DATA_UNIT_WIDTH = 40;//柱單元寬度
    private readonly int DATA_UNIT_HEIGHT = 30;//柱單元高度

2、篩選當(dāng)頁(yè)數(shù)據(jù)方法

為了是通過(guò)點(diǎn)擊下一頁(yè)，上一頁(yè)按鈕，對(duì)數(shù)據(jù)進(jìn)行篩選，選出當(dāng)頁(yè)顯示數(shù)據(jù)進(jìn)行繪制

    protected DataSet QueryDisplayRecord(int pagenum)
    {
        DataSet ds = new DataSet();
        DataTable dt = new DataTable();
        dt.Columns.Add(new DataColumn("date"));
        dt.Columns.Add(new DataColumn("price"));
        for (int i = 7 * pagenum; i < (goStr.Count >= WEEKDAYS * (pagenum + 1) ? WEEKDAYS * (pagenum + 1) : goStr.Count); i++)
        {
            DataRow dr = dt.NewRow();
            dr["date"] = goStr.Keys.Take(i + 1).Last(); ;
            dr["price"] = goStr.Values.Take(i + 1).Last(); ;
            dt.Rows.Add(dr);
        }
        ds.Tables.Add(dt);
        return ds;
    }

哦，對(duì)了，這里用的是dictionary暫時(shí)存的模擬數(shù)據(jù)，正常情況當(dāng)然要是通過(guò)數(shù)據(jù)庫(kù)了。

3、生成圖片

    protected void CreateImage(string from, string to, int pagenum, DataSet ds)
    {
        Font font_Note = new System.Drawing.Font("Arial", 9, FontStyle.Regular);//x軸，y軸，解釋內(nèi)容字體    小字
        Font font_GraphicName = new System.Drawing.Font("微軟雅黑", 18, FontStyle.Regular);//圖表名稱 字體      大字
        Font font_GraphicTime = new System.Drawing.Font("微軟雅黑", 14, FontStyle.Regular);//圖表時(shí)間 字體      大字
        Brush brush_Blue = new SolidBrush(Color.Black);//藍(lán)色線條
        if (ds != null)
        {
            int height = 620, width = 650;

            System.Drawing.Bitmap p_w_picpath = new System.Drawing.Bitmap(width, height);
            Graphics g = Graphics.FromImage(p_w_picpath);
            g.Clear(Color.White);
            System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(new Rectangle(0, 0, p_w_picpath.Width, p_w_picpath.Height), Color.LightGray, Color.LightGray, 1.2f, true);
            //調(diào)用FillRectangle方法使用指定顏色填充柱形圖的內(nèi)部
            g.FillRectangle(Brushes.WhiteSmoke, 0, 0, width, height);
            Brush brush2 = new SolidBrush(Color.Black);
            //應(yīng)用DrawString方法輸出文字信息
            g.DrawString(from + " 至 " + to + " 機(jī)票分析圖 (單位:CNY)", font_GraphicName, brush_Blue, new PointF(TITLE_LEFT, TITLE_TOP));
            //畫(huà)圖片的邊框線
            g.DrawRectangle(new Pen(Color.Black), 0, 0, p_w_picpath.Width - 1, p_w_picpath.Height - 1);
            Pen mypen = new Pen(brush, 1);

            //繪制橫向線條
            for (int i = 0; i < WEEKDAYS; i++)
            {
                g.DrawLine(mypen, GRID_X_LEFT + GRID_UNIT_WIDTH * i, GRID_X_TOP, GRID_X_LEFT + GRID_UNIT_WIDTH * i, GRID_X_BOTTOM);
            }
            Pen mypen1 = new Pen(Color.Black, 2);
            g.DrawLine(mypen1, GRID_X_LEFT - GRID_UNIT_WIDTH, GRID_X_TOP, GRID_X_LEFT - GRID_UNIT_WIDTH, GRID_X_BOTTOM);
            for (int i = 0; i < Y_UNIT_NUM; i++)
            {
                g.DrawLine(mypen, GRID_Y_LEFT, GRID_Y_TOP + GRID_UNIT_HEIGHT * i, GRID_Y_RIGHT, GRID_Y_TOP + GRID_UNIT_HEIGHT * i);
            }
            g.DrawLine(mypen1, GRID_Y_LEFT, GRID_Y_TOP + GRID_UNIT_HEIGHT * (Y_UNIT_NUM - 1), GRID_Y_RIGHT, GRID_Y_TOP + GRID_UNIT_HEIGHT * (Y_UNIT_NUM - 1));
            //x軸
            for (int i = 0; i < WEEKDAYS; i++)
            {
                g.DrawString(ds.Tables[0].Rows[i][0].ToString().Substring(ds.Tables[0].Rows[i][0].ToString().LastIndexOf(',') + 1), font_Note, Brushes.Black, CHAR_X_LEFT + GRID_UNIT_WIDTH * i, CHAR_X_TOP);
            }
            //y軸
            string[] money = { "5000CNY", "4500CNY", "4000CNY", "3500CNY", "3000CNY", "2500CNY", "2000CNY", "1500CNY", "1000CNY", "500CNY" };
            for (int i = 0; i < Y_UNIT_NUM; i++)
            {
                g.DrawString(money[i].ToString(), font_Note, Brushes.Black, CHAR_Y_LEFT, CHAR_Y_TOP + DATA_UNIT_HEIGHT * i);
            }

            int[] Count = new int[WEEKDAYS];
            int j = 0;
            for (j = 0; j < WEEKDAYS; j++)
            {
                Count[j] = Convert.ToInt32(ds.Tables[0].Rows[j][1].ToString());
            }
            //顯示柱狀效果
            ImageAttributes imgAtt = new ImageAttributes();
            imgAtt.SetWrapMode(WrapMode.TileFlipXY);//為了使柱形圖片無(wú)漸變色效果
            for (int i = 0; i < WEEKDAYS; i++)
            {
                g.DrawImage(bitmap, new Rectangle(GRID_Y_LEFT + GRID_UNIT_WIDTH * i + (GRID_UNIT_WIDTH - DATA_UNIT_WIDTH) / 2, (int)(380 - (Count[i] > 5000 ? 5000 : Count[i]) * 3F / 50F), 40, (int)(Count[i] * 3F / 50F)), 0, 0, bitmap.Width, bitmap.Height, GraphicsUnit.Pixel, imgAtt);
            }
            //創(chuàng)建其支持存儲(chǔ)區(qū)為內(nèi)存的流
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            //將此圖像以指定格式保存到指定流中
            p_w_picpath.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
            //清除緩沖區(qū)流中的所有內(nèi)容輸出
            Response.ClearContent();
            //設(shè)置輸出MIME類型
            Response.ContentType = "p_w_picpath/Gif";
            Response.BinaryWrite(ms.ToArray());
        }
        else
        {
            int height = 380, width = 570;
            System.Drawing.Bitmap p_w_picpath = new System.Drawing.Bitmap(width, height);
            Graphics g = Graphics.FromImage(p_w_picpath);
            g.Clear(Color.White);
            //應(yīng)用DrawString方法輸出文字信息
            g.DrawString("無(wú)符合搜索條件數(shù)據(jù)", font_GraphicName, brush_Blue, new PointF(140, 20));
            //創(chuàng)建其支持存儲(chǔ)區(qū)為內(nèi)存的流
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            //將此圖像以指定格式保存到指定流中
            p_w_picpath.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
            //清除緩沖區(qū)流中的所有內(nèi)容輸出
            Response.ClearContent();
            //設(shè)置輸出MIME類型
            Response.ContentType = "p_w_picpath/Gif";
            Response.BinaryWrite(ms.ToArray());
        }
    }

可能大家看的比較暈，因?yàn)槿且恍┳鴺?biāo)的計(jì)算，這個(gè)大家就不用太多考慮，就知道圖表和柱形的一個(gè)思路就行了。

最后總結(jié)一下，其實(shí)畫(huà)圖指定是離不開(kāi)一些點(diǎn)在圖中位移的計(jì)算，這里最好是自己能在草紙上比劃一下，設(shè)計(jì)一下，這樣會(huì)畫(huà)的更快一些，同時(shí)也不容易被一大堆的數(shù)據(jù)搞暈。另外一點(diǎn)就是數(shù)據(jù)這塊，柱形的比例搞好就行了，公式大概就是H(格子的實(shí)際高度)/h(單位刻度表示的價(jià)錢(qián))=X(柱形的高度，我們所有求的)/price(當(dāng)前柱的實(shí)際表示價(jià)錢(qián)，數(shù)據(jù)庫(kù)中存的)。最后也就是X= H*price/h 這樣。

想做出更加完美，智能的圖表還有許多地方可以改進(jìn)：

1、y軸展示的刻度我們可以動(dòng)態(tài)變化，根據(jù)所查詢出數(shù)據(jù)的最大值進(jìn)行刻度計(jì)算，找出合適的單位刻度

2、x軸可以做一個(gè)額外的注釋（當(dāng)然，這里就是星期，也不太用到），但是如果是一些內(nèi)容的話，可以根據(jù)坐標(biāo)范圍做鼠標(biāo)移上有提示那種。

3、可以把柱形做的再美一點(diǎn)，更加立體一些，當(dāng)然，這是需要依靠美工的力量。

Demo地址：http://down.51cto.com/data/1878284