Month: May 2021

          จากบทความก่อนหน้านี้ ผู้เขียนได้แนะนำเกี่ยวกับ Progress bar และวิธีการใช้งานเบื้องต้นกันไปแล้ว ซึ่งใครที่ยังไม่ได้อ่าน สามารถอ่านเพิ่มเติมได้ ที่นี่ มาถึงในบทความนี้ ผู้เขียนจึงขอนำความรู้ดังกล่าวมาต่อยอดประยุกต์ใช้กับการทำงานจริงที่มีการดึงข้อมูลตอน Runtime มาแสดงผลด้วย Progress bar โดยผู้เขียนจะไม่ขอลงรายละเอียดในส่วนของการสร้างสไตล์ชีทและการกำหนดค่าต่างๆแล้ว แต่จะเน้นในส่วนของการดึงข้อมูลมาแสดงแทน โดยผู้เขียนจะพยายามยกตัวอย่างให้เห็นหลายแนว เพื่อให้ผู้อ่านเห็นภาพในการนำไปใช้มากขึ้น ซึ่งแต่ละแบบจะต้องทำอย่างไรบ้าง มาดูกันเลยค่ะ

แบบแถบละสี

1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล

    private void getData()
    {
        ////////////////////เป็นการสมมุติการดึงข้อมูลมาใส่ Datatable ที่ชื่อว่า dtProgress ซึ่งเป็นจำนวนของผลไม้แต่ละชนิด

        StringBuilder strProgress = new StringBuilder();
        DataTable dtProgress = new DataTable();
        dtProgress.Columns.AddRange(new DataColumn[2] { 
                         new DataColumn("Percent", typeof(int)),
                        new DataColumn("Name",typeof(string))});

        dtProgress.Rows.Add(25, "Orange");
        dtProgress.Rows.Add(56, "Grape");
        dtProgress.Rows.Add(45, "Mango");
        dtProgress.Rows.Add(100, "Banana");
      
      ////////////////////เป็นการวนลูปค่าเพื่อสร้างแท็ก html ในการแสดงผลแถบ Progress bar
         int i = 0;
         for ( i = 0; i <= dtProgress.Rows.Count -1; i++) 
         {
         
     ////////////////////เป็นการแสดงชื่อผลไม้แต่ละชนิดบนแถบ Progress bar
            strProgress.Append("<h3 class=\"progress-title\">" + dtProgress.Rows[i]["Name"] + "</h3>");
            strProgress.Append("<div class=\"progress-outer\">");
            strProgress.Append("<div class=\"progress\">");

     ////////////////////เป็นการแสดงกำหนดขนาดให้กับแถบสี Progress bar ตามข้อมูล % ในแถวที่วน และมีการ ดึงค่าสไตล์ชีทจากการเรียกใช้ฟังก์ชั่น getCss()

ตามเงื่อนไขของจำนวน % ด้วย
            strProgress.Append("<div class=\"progress-bar progress-bar-striped " + getCss(int.Parse(dtProgress.Rows[i]["Percent"].ToString())) + " \" style=\"width:" + dtProgress.Rows[i]["Percent"] + "%;\"></div>");


     ////////////////////แสดงจำนวน % ของแต่ละแถบ Progress bar

            strProgress.Append("<div class=\"progress-value\"><span>" + dtProgress.Rows[i]["Percent"] + "</span>%</div>");
            strProgress.Append("</div></div>");
         }

     ////////////////////นำค่า Tag Html ที่เตรียมไว้ มาแสดงผลด้วย Literal

         ltrProgressBar.Text = strProgress.ToString();

    }

2. เมธอดในการแปลงค่าสไตล์ชีทเพื่อปรับสีตามจำนวนที่ส่งมาเป็นพารามิเตอร์

private string getCss(int Percent)
    {
        string ReturnResult = "";

        if (Percent >= 0 && Percent <= 25) 
        {
            ReturnResult = "progress-bar-danger";
        }
        else if (Percent > 25&& Percent <= 50) 
        {
            ReturnResult = "progress-bar-warning"; 
        }
        else if (Percent > 50 && Percent <= 75)
        {
            ReturnResult = "progress-bar-info";
        }
        else if (Percent > 75 && Percent <= 100)
        {
            ReturnResult = "progress-bar-success";
        }
        return ReturnResult;
    }

จากโค้ดข้างต้นจะเป็นการกำหนดสไตล์ชีทที่จะใช้ ซึ่งจะขึ้นอยู่กับจำนวนค่า % ที่ส่งมาเป็นพารามิเตอร์ โดยจะแบ่งออกเป็น 4 ช่วง

• สีแดง ช่วงตั้งแต่ 0 – 25 %
• สีส้ม ช่วงตั้งแต่ 26 – 50 %
• สีฟ้า ช่วงตั้งแต่ 51 – 75 %
• สีเขียว ช่วงตั้งแต่ 76 – 100 %

ตัวอย่างการเรียกใช้งาน

    protected void Page_Load(object sender, EventArgs e)
    {
        getData();
    }

ผลลัพธ์

แบบหลายสีในแถบเดียวกัน(แบบที่ 1)

          โดยในตัวอย่างนี้ จะเป็นการแสดงข้อมูลจำนวนผลไม้เป็น % รวมในแถบ Progress bar เดียวกัน ซึ่งจะแยกตามสี และมีบอกจำนวนรวมถึงชื่อผลไม้ให้ทราบ อีกทั้งยังแสดงจำนวนรวมของผลไม้ทุกชนิดด้วย โดยมีวิธีการทำ ดังนี้ค่ะ

1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล

    private void getMultiFruitColorData()
    {
        StringBuilder strProgress = new StringBuilder();
        DataTable dtProgress = new DataTable();
        dtProgress.Columns.AddRange(new DataColumn[2] { 
                         new DataColumn("Percent", typeof(int)),
                        new DataColumn("Name",typeof(string))});
        dtProgress.Rows.Add(25, "Orange");
        dtProgress.Rows.Add(12, "Grape");
        dtProgress.Rows.Add(7, "Mango");
        dtProgress.Rows.Add(25, "Banana");

        int i = 0;
        int percent = 0;
        string CssStr = "";
        int Total = 0;
        
            strProgress.Append("<h3 class=\"progress-title\">Multiple-fruits</h3>");
            strProgress.Append("<div class=\"progress-outer\">");
            strProgress.Append("<div class=\"progress\">");
        for (i = 0; i <= dtProgress.Rows.Count - 1; i++)
        {
            percent = int.Parse(dtProgress.Rows[i]["Percent"].ToString());


////////////////////คำนวณผลรวม % ของผลไม้ทุกชนิดตามการวนรอบที่จะแสดงในแถบ Progress bar

            Total += percent;
            switch (i) 
            {
                case 0: CssStr = "progress-bar-danger"; break;
                case 1: CssStr = "progress-bar-warning"; break;
                case 2: CssStr = "progress-bar-info"; break;
                case 3: CssStr = "progress-bar-success"; break;
            }

////////////////////เป็นการแสงค่า % ของผลไม้แต่ละชนิดในแถบ Progress bar เดียวกัน โดยแสดงชื่อผลไม้ และจำนวน % ของผลไม้แต่ละชนิดด้วย

            strProgress.Append("<div class=\"progress-bar progress-bar-striped " + CssStr + "\" style=\"width:" + percent + "%;\">" + dtProgress.Rows[i]["Name"] + "(" + percent + "%)</div>");
           
        }  

 ////////////////////เป็นการแสงผลรวม % ของผลไม้ทุกชนิดในแถบ Progress bar

        strProgress.Append("<div class=\"progress-value\"><span>" + Total + "</span>%</div></div>");
        strProgress.Append("</div></div>");

        ltrProgressBar.Text = strProgress.ToString();

    }

          จากโค้ดตัวอย่างข้างต้น จะเห็นว่าการสร้างแท็ก Html จะแตกต่างจากแบบแรก คือจะมีการสร้างใน <div class=\”progress\”> เดียวกัน ซึ่งมีหลักการคล้ายกับการสร้าง Progress bar อย่างง่ายหลายสีในแถบเดียวกันที่เคยกล่าวไว้แล้วในบทความก่อนหน้านั่นเอง

ผลลัพธ์

แบบหลายสีในแถบเดียวกันและแสดงหลายแถบ Progress Bar(แบบที่ 2)

          ในตัวอย่างนี้ เป็นการแสดงผลแถบสีแยกตามช่วงของข้อมูลบน Progress bar แต่ละแถบ โดยการแสดงผลจะแบ่งสีตามปริมาณข้อมูลในแต่ละช่วง ดังนี้

สีแดง ช่วงตั้งแต่ 0 – 25 % สีส้ม ช่วงตั้งแต่ 26 – 50 % สีฟ้า ช่วงตั้งแต่ 51 – 75 % สีเขียว ช่วงตั้งแต่ 76 – 100 %

หากข้อมูลที่ต้องการแสดงผลตกอยู่ในช่วงใดก็จะมีการแสดงแถบสีนั้นขึ้นมาให้เห็นตามลำดับ โดยมีวิธีการทำต่อไปนี้ค่ะ

1. ดึงข้อมูลจากฐานข้อมูล และจัดเตรียม Tag Html ที่จะใช้ในการแสดงผล

    private void getMultiColorData()
    {
        StringBuilder strProgress = new StringBuilder();
        DataTable dtProgress = new DataTable();
        dtProgress.Columns.AddRange(new DataColumn[2] { 
                         new DataColumn("Percent", typeof(int)),
                        new DataColumn("Name",typeof(string))});

        dtProgress.Rows.Add(25, "Orange");
        dtProgress.Rows.Add(56, "Grape");
        dtProgress.Rows.Add(45, "Mango");
        dtProgress.Rows.Add(100, "Banana");

        int i = 0;
        int j = 0;
        int maxRange = 0;
        int percent = 0;
        for (i = 0; i <= dtProgress.Rows.Count - 1; i++)
        {
            percent= int.Parse(dtProgress.Rows[i]["Percent"].ToString());


////////////////////วนเพื่อสร้าง Progress bar ใหม่ในผลไม้แต่ละชนิด

            strProgress.Append("<h3 class=\"progress-title\">" + dtProgress.Rows[i]["Name"] + "</h3>");
            strProgress.Append("<div class=\"progress-outer\">");
            strProgress.Append("<div class=\"progress\">");
            maxRange = 0;

////////////////////คำนวณหาว่าค่าของ % ตกอยู่ในช่วงใด 1-4(เนื่องจากแบ่งออกเป็นช่วงละ 25 % และรวมเป็น 100%)


            if (percent >= 0 && percent <= 25)
            {
                maxRange = 1;
            }
            else if (percent > 25 && percent <= 50)
            {
                maxRange = 2;
            }
            else if (percent > 50 && percent <= 75)
            {
                maxRange = 3;
            }
            else if (percent > 75 && percent <= 100)
            {
                maxRange = 4;
            }

////////////////////วนลูปเพื่อแสดงผลสีในแต่ละช่วงบน Progress bar โดยมีการเรียกใช้งานเมธอด getCssRange()

            for (j = 1; j <= maxRange; j++)
            {
                strProgress.Append(getCssRange(percent, j, maxRange));
             }
            strProgress.Append("<div class=\"progress-value\"><span>" + dtProgress.Rows[i]["Percent"] + "</span>%</div></div>");
            strProgress.Append("</div></div>");
        }

        ltrProgressBar.Text = strProgress.ToString();

    }

2. สร้างเมธอดที่ใช้ในการสร้างแท็ก Html ในการแสดงผลแถบสี ซึ่งในส่วนของกระบวนการคำนวณแถบสีจะไม่ขอลงในรายละเอียด แต่แสดงไว้ให้เห็นภาพการทำงานหลักๆเท่านั้น ดังนี้ค่ะ

    private string getCssRange(int Percent,int Range,int MaxRange)
    {
        string ReturnResult = "";

        switch (Range)
        {
            case 1:
                if (MaxRange > Range)
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width:25%;\"></div>";

                else 
                {
                    Percent = Percent >= 25 ? 25 : Percent - (25 * (Range - 1));
                ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-danger\" style=\"width:" + Percent + "%;\"></div>";
                }
                break;
            case 2:
                if (MaxRange > Range)
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-warning\" style=\"width:25%;\"></div>";

                else
                {
                    Percent = Percent >= 50 ? 50 : Percent - (25 * (Range - 1));
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-warning\" style=\"width:" + Percent + "%;\"></div>";
                }
               
                break;

            case 3:
                if (MaxRange > Range)
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-info\" style=\"width:25%;\"></div>";

                else
                {
                    Percent = Percent >= 75 ? 75 : Percent- (25* (Range-1));
                    ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-info\" style=\"width:" + Percent + "%;\"></div>";
                }
                 break;

            case 4:

                 if (Percent==100)
                     ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-success\" style=\"width:25%;\"></div>";
                 else
                 {
                     Percent =   Percent - (25 * (Range - 1));
                     ReturnResult = "<div class=\"progress-bar progress-bar-striped progress-bar-success \" style=\"width:" + Percent + "%;\"></div>";
                 }
                  break;

        }
         return ReturnResult;
    }

ผลลัพธ์

หมายเหตุ : จากตัวอย่างข้างต้น เป็นเพียงการยกตัวอย่างเพื่อให้ผู้อ่านเข้าใจการประยุกต์ใช้งาน และการทำงานร่วมกับ Progress bar เพิ่มมากขึ้นเท่านั้น ซึ่งผู้อ่านสามารถดัดแปลง และมีวิธีการรวมถึงเทคนิคที่แตกต่างออกไปที่จะนำมาใช้ในการพัฒนาเพื่อแสดงผลข้อมูล ขึ้นกับอัลกอริธึมของแต่ละท่าน

          จากบทความนี้จะเห็นได้ว่า วิธีการดึงข้อมูลมาแสดงผลด้วย Progress bar แบบนี้ จะมีความยืดหยุ่นกว่าแบบที่มีการกำหนดค่าตายตัวในบทความก่อนหน้า อีกทั้งยังสามารถแสดงจำนวนแถบ Progress bar และสีได้ไม่จำกัด ขึ้นอยู่กับข้อมูล การกำหนดเงื่อนไขในการแสดงผล และความต้องการของผู้พัฒนาที่จะดึงข้อมูลมาแสดงผลนั่นเอง และผู้เขียนหวังเป็นอย่างยิ่งว่า บทความนี้ จะพอเป็นแนวทางในการนำไปใช้งานจริงให้กับทุกท่านได้นะคะ ขอบคุณค่ะ ^^

แหล่งข้อมูลอ้างอิง :

https://bestjquery.com/tutorial/progress-bar/demo78/

https://www.jquery-az.com/boots/demo.php?ex=51.0_5