Chart Helper - หนึ่งในตัวช่วยเว็บ ASP.NET ที่มีประโยชน์มากมาย
ข้อมูลสามารถแสดงในแผนภูมิได้โดยใช้ตัวช่วยแผนภูมิ ส่วนนี้จะอธิบายการใช้งานเฉพาะของตัวช่วยแผนภูมิ
ในบทที่แล้ว คุณได้เรียนรู้วิธีใช้ "ตัวช่วย" ของ ASP.NET แล้ว
เราได้อธิบายวิธีการใช้ "WebGrid Helper" เพื่อแสดงข้อมูลในตารางแล้ว
บทนี้อธิบายวิธีการใช้ Chart Helper เพื่อแสดงข้อมูลแบบกราฟิก
"ตัวช่วยแผนภูมิ" สามารถสร้างรูปภาพแผนภูมิประเภทต่างๆ พร้อมตัวเลือกการจัดรูปแบบและป้ายกำกับที่หลากหลาย สามารถสร้างแผนภูมิมาตรฐาน เช่น แผนภูมิพื้นที่ แผนภูมิแท่ง แผนภูมิคอลัมน์ แผนภูมิเส้น แผนภูมิวงกลม ฯลฯ รวมถึงแผนภูมิระดับมืออาชีพ เช่น แผนภูมิหุ้น
ข้อมูลที่แสดงในแผนภูมิอาจมาจากอาร์เรย์ ฐานข้อมูล หรือไฟล์
ตัวอย่างต่อไปนี้แสดงโค้ดที่จำเป็นในการแสดงแผนภูมิตามข้อมูลอาร์เรย์:
@{ var myChart = new Chart(width: 600, height: 400) .AddTitle("พนักงาน") .AddSeries(chartType: "column",xValue: new[] { "Peter", "Andrew", "Julie", "แมรี่", "เดฟ" }, yValues: ใหม่[] { "2", "6", "4", "5", "3" }) .เขียน();}- แผนภูมิใหม่ จะสร้างวัตถุแผนภูมิใหม่และตั้งค่าความกว้างและความสูง
- วิธี การ AddTitle ระบุชื่อเรื่องของแผนภูมิ
- วิธี การ AddSeries เพิ่มข้อมูลลงในแผนภูมิ
- พารามิเตอร์ ChartType กำหนดประเภทของแผนภูมิ
- พารามิเตอร์ xValue กำหนดชื่อของแกน x
- พารามิเตอร์ yValues กำหนดชื่อของแกน y
- วิธี การ Write() แสดงแผนภูมิ
คุณสามารถดำเนินการสืบค้นฐานข้อมูล จากนั้นใช้ข้อมูลจากผลลัพธ์การสืบค้นเพื่อสร้างแผนภูมิ:
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("เลือกชื่อ, ราคาจากผลิตภัณฑ์"); var myChart = แผนภูมิใหม่ (กว้าง: 600, สูง: 400) .AddTitle("ผลิตภัณฑ์ การขาย") .DataBindTable(dataSource: dbdata, xField: "Name").Write();}- var db = Database.Open เปิดฐานข้อมูล (กำหนดวัตถุฐานข้อมูลให้กับตัวแปร db)
- var dbdata = db.Query ดำเนินการสืบค้นฐานข้อมูลและบันทึกผลลัพธ์ใน dbdata
- แผนภูมิใหม่ จะสร้างวัตถุแผนภูมิใหม่และตั้งค่าความกว้างและความสูง
- วิธี การ AddTitle ระบุชื่อเรื่องของแผนภูมิ
- วิธีการ DataBindTable ผูกแหล่งข้อมูลเข้ากับแผนภูมิ
- วิธี การ Write() แสดงแผนภูมิ
อีกทางเลือกหนึ่งนอกเหนือจากการใช้เมธอด DataBindTable คือการใช้ AddSeries (ดูตัวอย่างก่อนหน้า) DataBindTable ใช้งานง่ายกว่า แต่ AddSeries มีความยืดหยุ่นมากกว่า เนื่องจากคุณสามารถระบุแผนภูมิและข้อมูลได้ชัดเจนยิ่งขึ้น:
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("เลือกชื่อ, ราคาจากผลิตภัณฑ์"); var myChart = แผนภูมิใหม่ (กว้าง: 600, สูง: 400) .AddTitle("ผลิตภัณฑ์ การขาย") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "ชื่อ",yValues: dbdata, yFields: "ราคา").เขียน();}วิธีที่สามในการสร้างแผนภูมิคือการใช้ไฟล์ XML เป็นข้อมูลของแผนภูมิ:
@ การใช้ System.Data;@{var dataSet = new DataSet();dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));dataSet.ReadXml(Server.MapPath("data.xml"));var dataView = ใหม่ DataView(dataSet.Tables[0]);var myChart = แผนภูมิใหม่ (กว้าง: 600, สูง: 400).AddTitle("ยอดขายต่อพนักงาน").AddSeries("Default", chartType: "Pie",xValue: dataView, xField: "Name",yValues: dataView, yFields: "Sales").Write();} }ข้างต้นนี้เป็นการแนะนำการใช้งานตัวช่วยแผนภูมิ