WebPages diagrammalari
Chart yordamchisi — ASP.NET’ning ko‘plab foydali veb-yordamchilaridan (Web Helpers) biri.
Chart yordamchisi
Oldingi boblarda ASP.NET yordamchisidan ("Helper") qanday foydalanishni o‘rgandingiz.
"WebGrid Helper" yordamida ma’lumotlarni jadval (grid) ko‘rinishida ko‘rsatishni o‘rgandingiz.
Ushbu bobda "Chart Helper" yordamida ma’lumotlarni grafik shaklda qanday ko‘rsatish tushuntiriladi.
"Chart Helper" ko‘plab formatlash parametrlari va yorliqlarga ega turli xil diagramma tasvirlarini yarata oladi. U maydonli (area), gorizontal ustunli (bar), vertikal ustunli (column), chiziqli (line) va doiraviy (pie) diagrammalar kabi standart diagrammalarni, shuningdek birja diagrammalari (stock charts) kabi ixtisoslashgan diagrammalarni ham yarata oladi.
Diagrammada ko‘rsatiladigan ma’lumotlar massivdan, ma’lumotlar bazasidan yoki fayldagi ma’lumotlardan olinishi mumkin.
Massivdan diagramma
Quyidagi misolda qiymatlar massividan diagramma ko‘rsatish uchun kerakli kod keltirilgan:
Misol
@{
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();
}
Misolni ishga tushirish »
- new Chart yangi diagramma obyektini yaratadi va uning kengligi hamda balandligini belgilaydi
- AddTitle metodi diagramma sarlavhasini belgilaydi
- AddSeries metodi diagrammaga ma’lumotlar qo‘shadi
- chartType parametri diagramma turini belgilaydi
- xValue parametri x o‘qi nomlarini belgilaydi
- yValues parametri y o‘qi qiymatlarini belgilaydi
- Write() metodi diagrammani ko‘rsatadi
Ma’lumotlar bazasidagi ma’lumotlardan diagramma
Ma’lumotlar bazasiga so‘rov bajarib, so‘ngra natijalardagi ma’lumotlardan diagramma yaratishda foydalanishingiz mumkin:
Misol
@{
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();
}
Misolni ishga tushirish »
- var db = Database.Open ma’lumotlar bazasini ochadi (va ma’lumotlar bazasi obyektini db o‘zgaruvchisiga tayinlaydi)
- var dbdata = db.Query ma’lumotlar bazasiga so‘rov bajaradi va natijani dbdata’da saqlaydi
- new Chart yangi diagramma obyektini yaratadi va uning kengligi hamda balandligini belgilaydi
- AddTitle metodi diagramma sarlavhasini belgilaydi
- DataBindTable metodi ma’lumotlar manbasini diagrammaga bog‘laydi
- Write() metodi diagrammani ko‘rsatadi
DataBindTable metodiga muqobil ravishda AddSeries’dan foydalanish mumkin (oldingi misolga qarang). DataBindTable’dan foydalanish osonroq, biroq AddSeries moslashuvchanroq, chunki unda diagramma va ma’lumotlarni aniqroq belgilashingiz mumkin:
Misol
@{
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();
}
Misolni ishga tushirish »
XML ma’lumotlaridan diagramma
Diagramma yaratishning uchinchi usuli — diagramma uchun ma’lumot sifatida XML fayldan foydalanish:
Misol
@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();}
}
Misolni ishga tushirish »
Chart obyekti ma’lumotnomasi
| Yordamchi | Tavsif |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Diagrammani initsializatsiya qiladi. |
| Chart.AddLegend([title] [, name]) | Diagrammaga legenda (shartli belgilar bloki) qo‘shadi. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Diagrammaga qiymatlar seriyasini qo‘shadi. |
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!