1. Home
  2. แผนภูมิหน้าเว็บ ASP.NET

บทช่วยสอน แผนภูมิหน้าเว็บ ASP.NET ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ Helper แผนภูมิ,สร้างแผนภูมิขึ้นอยู่กับอาร์เรย์,ตัวอย่าง,สร้างแผนภูมิจากฐานข้อมูล,ตัวอย่าง,ตัวอย่าง,สร้างแผนภูมิบนพื้นฐานของข้อมูล XML,ตัวอย่าง,

แผนภูมิหน้าเว็บ ASP.NET

ผู้ช่วยแผนภูมิ - หนึ่งในหลาย ๆ เว็บ Helper ASP.NET ประโยชน์

Helper แผนภูมิ

ในบทก่อนหน้านี้คุณได้เรียนรู้วิธีการใช้ ASP.NET ของ "ผู้ช่วย."

เป็นแล้วอธิบายวิธีการใช้ "ผู้ช่วย WebGrid" เพื่อแสดงข้อมูลในตาราง

บทนี้จะอธิบายวิธีการใช้ "ผัง Helper" กราฟแสดงข้อมูล

"ชาร์ Helper" สามารถสร้างความแตกต่างของป้ายหลากหลายของตัวเลือกการจัดรูปแบบและแผนภูมิภาพด้วย มันสามารถสร้างแผนภูมิพื้นที่แผนภูมิแท่งแผนภูมิคอลัมน์แผนภูมิเส้นแผนภูมิวงกลมและมาตรฐานอื่น ๆ ก็สามารถสร้างแผนภูมิมืออาชีพมากขึ้นเช่นแผนภูมิหุ้น

แผนภูมิแผนภูมิ

ข้อมูลที่สามารถแสดงในแผนภูมิจากอาร์เรย์ข้อมูลเป็นฐานข้อมูลหรือไฟล์

สร้างแผนภูมิขึ้นอยู่กับอาร์เรย์

ตัวอย่างต่อไปนี้แสดงรหัสที่จำเป็นต้องใช้ในการทำแผนที่ข้อมูลจากอาร์เรย์:

ตัวอย่าง

@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
}

เล่นอินสแตนซ์»

- โครงสร้างใหม่สร้างวัตถุแผนภูมิใหม่และกำหนดความกว้างและความสูงของมัน

- วิธีการ AddTitle ระบุชื่อแผนภูมิ

- AddSeries วิธีการของการเพิ่มข้อมูลไปยังแผนภูมิ

- พารามิเตอร์ ChartType กำหนดประเภทของแผนภูมิ

- พารามิเตอร์ชื่อXvalue กำหนดแกน x

- พารามิเตอร์ชื่อyValues กำหนดแกน y

- เขียน () วิธีการแสดงแผนภูมิ

สร้างแผนภูมิจากฐานข้อมูล

คุณสามารถดำเนินการค้นหาฐานข้อมูลและใช้ผลการค้นหาข้อมูลเพื่อสร้างแผนภูมิ:

ตัวอย่าง

@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
}

เล่นอินสแตนซ์»

- Var DB = Database.Open เปิดฐานข้อมูล (วัตถุฐานข้อมูลที่กำหนดให้กับตัวแปร DB)

- Var dbdata = db.Query ทำแบบสอบถามฐานข้อมูลและบันทึกผลใน dbdata

- โครงสร้างใหม่สร้างวัตถุแผนภูมิใหม่และกำหนดความกว้างและความสูงของมัน

- วิธีการ AddTitle ระบุชื่อแผนภูมิ

- วิธีการผูก DataBindTable แหล่งข้อมูลแผนภูมิ

- เขียน () วิธีการแสดงแผนภูมิ

นอกเหนือจากการใช้วิธีการนอก DataBindTable วิธีหนึ่งคือการใช้ AddSeries (ดูตัวอย่างก่อนหน้านี้) DataBindTable ง่ายต่อการใช้ แต่ AddSeries มีความยืดหยุ่นมากขึ้นเพราะคุณได้ชัดเจนมากขึ้นสามารถระบุแผนภูมิและข้อมูล:

ตัวอย่าง

@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries(chartType:"Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
}

เล่นอินสแตนซ์»

สร้างแผนภูมิบนพื้นฐานของข้อมูล XML

วิธีที่สามคือการสร้างแผนภูมิการใช้ไฟล์ XML เป็นข้อมูลแผนภูมิ:

ตัวอย่าง

@using System.Data;

@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet.Tables[0]);
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}

เล่นอินสแตนซ์»


บทแนะนำยอดนิยม

Contact US

แผนภูมิหน้าเว็บ ASP.NET
10/30