Диаграмма Helper - один из многих полезных веб ASP.NET помощников.
Диаграмма Helper
В предыдущих главах вы узнали , как использовать ASP.NET "Helper" .
Вы узнали , как отображать данные в виде сетки с помощью "WebGrid Helper" .
В этой главе описывается , как отображать данные в графическом виде, используя "Chart Helper" .
"Chart 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();
} Выполнить пример » - new Chart создает новый объект диаграммы и устанавливает его ширину и высоту
- AddTitle метод определяет заголовок диаграммы
- AddSeries метод добавляет данные в диаграмму
- chartType параметр определяет тип диаграммы
- The xValue параметр определяет имена оси х
- , yValues Параметр определяет значения по оси Y
- Write() метод отображает диаграмму
График С данными базы данных
Вы можете выполнить запрос к базе данных, а затем использовать данные из результатов, чтобы создать таблицу:
пример
@{
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 открывает базу данных (и присваивает объект базы данных переменного дб)
- var dbdata = db.Query выполняет запрос к базе данных и сохраняет результат в dbdata
- new Chart создает диаграммы новый объект и устанавливает его ширину и высоту
- AddTitle метод определяет заголовок диаграммы
- DataBindTable метод связывает источник данных к диаграмме
- Write() метод отображает диаграмму
Альтернатива использованию 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();}
} Выполнить пример »