พอดีไป อ่าน Blog ของหนังสือ C# แบบ OOP เข้าแล้วรู้สึกว่าเป็นประโยชน์น่าเก็บไว้ เลย นำมาเผยแพร่ ช่วยๆักันในเว็บนี้ครับ บท ความนี้สอนวิธีสร้างกราฟเส้นในหน้าเว็บ ASP.NET ด้วยภาษา C# โดยใช้ control ชื่อ WebChart เจตนาเขียนสำหรับผู้เริ่มต้น จึงเขียนให้อ่านง่ายที่สุด และโค้ดตัวอย่างมีจำนวนบรรทัดน้อยที่สุด
ผลลัพธ์ ที่ท่านจะได้จากการทำตามขั้นตอนในบทความนี้ เป็นกราฟบนหน้าเว็บอย่างง่าย ท่านอาจเปลี่ยนจากกราฟเส้นเป็นกราฟแท่งหรือกราฟชนิดอื่นๆ ได้ภายหลัง
การสร้างกราฟบนหน้าเว็บ
การเขียน Web application ด้วยภาษา C# ให้มีกราฟตามข้อมูลในฐานข้อมูล สามารถทำได้หลายวิธีเช่น
• นิยามคลาสสร้างกราฟโดยใช้ DirectX
• นิยามคลาสสร้างกราฟโดยใช้ GDI+
• สร้างกราฟโดยใช้ Crystal Report
• สร้างกราฟโดยใช้ Chart control
ถ้า เป็น chart ที่ไม่ซับซ้อนนักผู้เขียนจะใช้วิธีสุดท้าย เพราะไม่เสียเวลามาก chart control ดีๆ มีหลายตัว ที่ผู้เขียนใช้บ่อยคือ WebChart control เพราะใช้งานได้ง่าย อ่อนตัวเพียงพอแก่ความต้องการทั่วๆ ไป และที่สำคัญคือฟรี ท่านสามารถเยี่ยมชมเว็บไซต์ของผู้สร้าง WebChart ได้ที่เว็บไซต์ www.carlosag.net และอาจดาวน์โหลดคู่มือและตัวอย่างโค้ดมาตรวจสอบดู
WebChart เป็น control ที่ดี มีความสามารถสูง มีลูกเล่นมาก แต่ในบทความนี้ผู้เขียนจะแนะนำวิธีใช้ WebChart อย่างพื้นฐานที่สุด
วิธีใช้งาน WebChart อย่างง่ายสุด
ตัว control เป็นไฟล์นามสกุล .dll เพียงไฟล์เดียว เป็นไฟล์ชื่อ WebChart.dll ที่ท่านสามารถดาวน์โหลดได้จากเว็บไซต์ www.laploy.com/download ต่อไปนี้เป็นขึ้นตอนการสร้างหน้าเว็บและการเขียนโปรแกรมภาษา C# เพื่อใช้งาน WebChart อย่างง่ายที่สุด
วิธีติดตั้ง WebChart
ต่อ ไปนี้เป็นขึ้นตอนการติดตั้ง control ชื่อ WebChart ที่เราจะนำมาใช้สร้างกราฟ การติดตั้งทำได้ง่าย ไม่ต้องรันโปรแกรมเซตอัพ หรือ install เพียงแค่ก็อปปี้ไฟล์ WebChart.dll ไปไว้ในโฟลเดอร์ c:WebChart เท่านั้น ขั้นตอนโดยละเอียดเป็นดังนี้
1. ดาวน์โหลดไฟล์ WebChart.zip จากเว็บไซต์ www.laploy.com/download
2. นำไฟล์ WebChart.zip มาคลายออกจะพบว่าภายในมีไฟล์ชื่อ WebChart.dll
3. สร้างโฟลเดอร์ชื่อ WebChart ไว้ที่รูทไดเรคทอรีของฮาร์ดดิสก์ หรือที่ c: หรือที่โฟลเดอร์ใดก็ได้ที่ท่านต้องการ
4. นำไฟล์ WebChart.dll ไปใส่ไว้ในโฟลเดอร์ดังกล่าว
การ ติดตั้ง WebChart ทำได้ง่ายมากเพียงแค่ก็อปปี้ไฟล์ WebChart.dll ไปไว้ในโฟลเดอร์ c:WebChart หรือโฟลเดอร์อื่นๆ ที่ต้องการเท่านั้น
สร้างเว็บไซต์ใหม่
ต่อ ไปนี้เป็นวิธีสร้างเว็บไซต์ใหม่ เป็นการสร้างเว็บไซต์แบบ ASP.NET ธรรมดา เราจะสร้างเว็บนี้ไว้ในคอมพิวเตอร์ของเราในโฟลเดอร์ชื่อ c:WebChartTest เพื่อใช้ทดสอบการสร้างกราฟด้วย WebChart
ขั้นตอนการสร้างเว็บไซต์ใหม่ใน Microsoft Visual Studio .NET 2005 (ต่อไปจะเรียกย่อว่า MSVS)มีดังนี้
1. สร้าง โฟลเดอร์ชื่อ WebChartTest (หรือชื่อะไรก็ได้ที่ท่านต้องการ) ไว้ที่รูทไดเรคทอรีของฮาร์ดดิสก์ หรือที่ c: หรือที่โฟลใดก็ได้ที่ท่านต้องการ
2. เปิดโปรแกรม MSVS
3. เลือกเมนู File/New/Web Site… เพื่อสร้างเว็บไซต์ใหม่
4. ในกรอบข้อความ New Web Site เลือก template แบบ ASP.NET Web Site
5. ในช่อง Language เลือกภาษา C#
6. กดปุ่ม Browse… แล้วเลือกโฟลเดอร์ชื่อ WebChartTest ที่เราสร้างไว้แล้วในข้อ 2
7. ถึงตอนนี้ MSVS จะสร้างเว็บไซต์ว่างๆ ให้โดยมีหน้าเว็บหนึ่งหน้าชื่อ default.aspx
เมื่อสร้างเว็บไซต์ใหม่เสร็จแล้ว ใน Solution Explorer จะมีโครงสร้างอย่างที่เห็นในภาพนี้
วิธีนำ WebChart ใส่ใน Visual Studio
การ ใช้งาน WebChart ทำได้ง่ายด้วยการลากและหยอดใส่หน้าเว็บด้วย web page designer ของ MSVS โดยมีวิธีทำเหมือน Server Control อื่นๆ ของ .NET (เช่น TextBox) แต่ก่อนที่จะทำเช่นนั้นได้ ท่านจะต้องนำ WebChart ไปใส่ไว้ใน toolbox ของ MSVS เสียก่อน
ขั้นตอนการนำ WebChart ไปใส่ไว้ใน toolbox ของ MSVS มีดังนี้
1. ถ้าไม่เห็น Solution Explorer (SE) ให้เปิด SE โดยเลือกเมนู View/Solution Explorer
2. ดับเบิ้ลคลิกที่ไอคอน default.aspx ใน SE เพื่อเปิดหน้าเว็บนี้ใน web page designer ของ MSVS
3. ถ้าไม่เห็น Toolbox ให้เปิดโดยเลือกเมนู View/Toolbox
4. คลิกขวาบริเวณว่างใน Toolbox แล้วเลือกรายการ Choose Items…
5. ในกรอบข้อความ Choose Toolbox Items (CTI) กดปุ่ม Browse…
6. ในกรอบข้อความ Open ให้ไปที่โฟลเดอร์ c:WebChart แล้วกดที่ไอคอนไฟล์ WebChart.dll
7. กดปุ่ม Open
8. กดปุ่ม OK ใน CTI เมื่อท่านทำถึงขั้นตอนนี้ท่านจะเห็นไอคอน Chart control ปรากฏใน ToolBox
เมื่อ นำ WebChart มาใส่ใน MSVS สำเร็จท่านจะพบว่ามีสองอย่างเพิ่มขึ้น อย่างแรกคือใน SE (กรอบซ้าย) ในโฟลเดอร์ Bin มีไฟล์ WebChart.dll ปรากฏขึ้น อย่างที่สองคือใน ToolBox จะมีไอคอน ChartControl ปรากฏขึ้น
วิธีนำ WebChart มาใส่ในหน้าเว็บ
ถึง ตอนนี้เราก็พร้อมที่จะนำ WebChart มาใส่ในหน้าเว็บได้แล้ว วิธีนWebChart มาใส่ในหน้าเว็บทำได้ง่ายเหมือนcontrol อื่นๆ ของ MSVSขั้นตอนโดยละเอียดเป็นดังนี้
1. ดูให้แน่ใจว่าท่ากำลังเปิดหน้า Default.aspx อยู่ใน web page designer ของ MSVS
2. ดับเบิ้ลคลิกที่ไอคอน Chart control
เมื่อ ทำตามขั้นตอนการนำ WebChart มาใส่ในหน้าเว็บแล้วจะมีภาพเช่นนี้บนหน้าจอ ที่เห็นเป็นตารางและมีเส้นกราฟคือ control ชื่อ ChartControl1
เขียนโปรแกรมสร้างกราฟ
เมื่อ นำ WebChart ใส่ในหน้าเว็บได้แล้ว และในกรอบ SE ในโฟลเดอร์ Bin มีไฟล์ WebChart.dll ปรากฏขึ้นแล้ง เป็นสัญญาณแสดงว่าเราก็พร้อมจะเขียนโปรแกรมเพื่อควบคุม WebChart ได้แล้ว
เรา อาจใช้ WebChart สร้างกราฟได้หลายแบบ แต่ในแบบฝึกหัดนี้จะแสดงวิธีสร้างกราฟเส้นอย่างง่าย ข้อมูลที่ใช้สร้างกราฟจะนำมาจาก array หากท่านต้องการใช้ข้อมูลจากฐานข้อมูล (เช่น MS SQL) ก็สามารถดัดแปลงโค้ดได้ง่าย เช่นคัดลอกข้อมูลจากฐานข้อมูลใส่ใน array ก่อน หรือจะนำข้อมูลจากฐานข้อมูลไปใช้พล็อตกราฟโดยตรงเลยก็ได้
โค้ด ภาษา C# ทั้งหมดจะอยู่ในไฟล์ Default.aspx.cs เพียงไฟล์เดียว ผู้เขียนจับทั้ง solution บีบเป็นไฟล์ zip ไว้เพื่อท่านสามารถไปทดลองเล่นดูได้เลย (ชื่อไฟล์ ChartControlTest.zip ดาวน์โหลดจากเว็บไซต์ www.laploy.com/download)
ส่วนประกาศรวม namespace
ใส่ส่วนประกาศรวม namespace ดูให้แน่ใจว่ามี namespace เหล่านี้ปรากฏอยู่ ถ้าไม่มีให้พิมพ์เพิ่ม
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Drawing;
using WebChart;
ส่วนนิยามสมาชิกแบบ filed
ใน คลาส Default ของหน้าเว็บตัวอย่างนี้เราต้องการ filed สมาชิกเพียงสามตัว filed แรกคือ myLine1 ทำหน้าที่เป็นตัวแปรอ้างอิง object ภาพเส้นกราฟที่เราจะแสดงใน ChartControl1 ตัวแปร myString เป็น array ของ string ทำหน้าที่เก็บข้อความที่เราจะใช้แสดงกำกับข้อมูลแต่ละจุดในกราฟ สุดท้ายคือตัวแปร myData เป็น array ของข้อมูลตัวเลขจำนวนเต็ม เก็บข้อมูลที่เราจะนำไปพล็อตกราฟแต่ละจุด
private LineChart myLine1;
string[] myString = new string[]
{
"Sun", "Mon", "Tue", "Wen",
"Thu", "Fri", "Sat"
};
int[] myData = new int[] { 0, 5, 12, 8, 15, 12, 30
สวนนิยามสมาชิกแบบ method
เนื่อง จากคลาสนี้เป็นคลาสหน้า เว็บ จึงไม่จำเป็นต้องมีสมาชิกแบบ property สมาชิกแบบที่สองซึ่งเป็นแบบสุดท้ายในคลาสนี้คือ method ซึ่งมีทั้งหมดเพียงสาม method คือ
• Page_Load : เป็น method ที่ทำงานเมื่อหน้าเว็บนี้ถูกโหลด
• GenGraph: ทำหน้าที่พล็อตจุด
• InitGraph: ทำหน้าที่กำหนดค่าเริ่มต้นให้ ChartControl1 และ filed สมาชิก myLine1
ต่อไปเป็นคำอธิบายโค้ดในแต่ละ method โดยละเอียด
Page_Load
เป็น method ที่จะทำงานโดยอัตโนมัติเมื่อหน้าเว็บนี้ถูกโหลด ใน method นี้สั้นมาก เพราะมีโค้ดเพียงสองบรรทัด ทำหน้าที่เรียก method อื่นๆ ให้ทำงาน
protected void Page_Load(object sender, EventArgs e)
{
InitGraph();
GenGraph();
}
InitGraph
Method InitGraph ทำหน้าที่กำหนดค่าเริ่มต้นให้แก่ ChartControl1 และ filed สมาชิก myLine1 บรรทัดแรกสร้าง object จากคลาส LineChart ซึ่งอยู่ใน namespace WebChart บรรทัดถัดมากำหนด property Color ของ myLine1 เป็นสีดำโดยใช้ค่าจาก struct Color ซึ่งถูกนิยามไว้ใน namespace System.Drawing
ถัดมาทำหน้าที่เซต property ชื่อ Legend ซึ่งทำหน้าที่แสดงคำอธิบายข้อมูล (จะมีประโยชน์มากกว่านี้เมื่อมีกราฟหลายๆ เส้น) บรรทัดถัดมาเซต property LineMaker.Size ทำหน้าที่กำหนดขนาดของจุดแสดงตำแหน่งข้อมูลให้มีขนาด 5 พิกเซล บรรทัดต่อมาเรียก mothod Add ของคลาส WebChart เพื่อนำ object myLine1 ไปใส่ไว้เพราะ WebChart ทำหน้าที่เป็น object collection
private void InitGraph()
{
myLine1 = new LineChart();
myLine1.Line.Color = Color.Black;
myLine1.Legend = "Weekly hit-rate";
myLine1.LineMarker.Size = 5;
ChartControl1.Charts.Add(myLine1);
ChartControl1.RedrawChart();
}
คำสั่งบรรทัดสุดท้ายเรียก mothod RedrawChat ของคลาส WebChart เพื่ออัพเดตภาพกราฟให้แสดงภาพตามการเซต property ต่างๆ แต่เรายังไม่ได้ใส่ค่าและพล็อตเส้นกราฟ
GenGraph
Method สุดท้ายคือ GenGraph ทำหน้าที่กำหนดค่าให้จุดต่างๆ ในกราฟและแสดงภาพกราฟ ในตัวอย่างนี้กราฟจะมีจำนวนจุดข้อมูลเพียงเจ็ดจุดตาม array element ซึ่งสมมุติว่าเป็นจำนวนผู้เข้ามาเยี่ยมชมเว็บไซต์แต่ละวันในหนึ่งสัปดาห์ โค้ดมีเพียงสามบรรทัดดังนี้
private void GenGraph()
{
for (int i = 0; i < myData.Length; i++)
myLine1.Data.Add(new ChartPoint(myString[i], myData[i]));
ChartControl1.RedrawChart();
}
บรรทัด แรกกำหนดการทำงานวนซ้ำด้วยคำ สั่ง for จำนวนรอบในการวนซ้ำเท่ากับจำนวน array element (ตัวอย่างนี้จะวนซ้ำเจ็ดรอบ) ภายใน loop มีคำสั่งบรรทัดเดียวทำหน้าที่เรียก method ชื่อ Data.Add ของ object myLine1 เพื่อนำข้อมูลของแต่ละจุด หรือ ChartPoint ไปใส่ใน myLine1
คำ ว่า ChartPoint เป็น type ที่นิยามไว้ใน namespace WebChart ทำหน้าที่รับข้อมูลที่จะนำไปพล็อตกราฟ โดยรับอาร์กิวเม้นต์สองตัวคือ xvalue เป็น string ทำหน้าที่แสดงข้อความประกอบข้อมูล อีกตัวคือ yvalue เป็น float ทำหน้าที่เก็บตัวข้อมูล
คำสั่งบรรทัดสุดท้ายเรียก mothod RedrawChat ของคลาส WebChart เพื่ออัพเดต ChartControl1 ให้แสดงภาพกราฟเส้นตามข้อมูลที่เรากำหนด
สรุปเรื่องสร้างกราฟอย่างง่ายใน ASP.NET
วิธีใช้งานและเขียนโปรแกรมควบคุม WebChart ยังมีอีกมาก แต่เท่าที่แนะนำมานี้ถือว่าเป็นข้อมูลที่เพียงพอแก่การเริ่มต้น เมื่อท่านลองเขียนโปรแกรมตามนี้แล้วท่านน่าจะสามารถแก้ไข ดัดแปลงรูปแบบการแสดงกราฟให้เป็นไปตามความต้องการได้ไม่ยากนัก โดยดูตัวอย่างโค้ดจากเว็บไซต์ของผู้ผลิต WebChart ตามที่ระบุไว้ตอนต้นบทความ
Original ของ บทความ: http://thai-cs.spaces.live.com/blog/cns!4D52C1812766D2D7!636.entry
