Последние учебники веб-разработки
×

ASP.NET Руководство

ASP.NET ГЛАВНАЯ ASP.NET вступление

WP Руководство

WebPages вступление WebPages бритва WebPages раскладка WebPages Папки WebPages Глобальный WebPages формы WebPages Объекты WebPages файлы WebPages Базы данных WebPages Помощники WebPages WebGrid WebPages Графики WebPages Эл. адрес WebPages PHP WebPages Публиковать WebPages Примеры

WP Рекомендации

WebPages Классы WebPages Безопасность WebPages База данных WebPages WebMail WebPages Помощники

ASP.NET Razor

Razor вступление Razor Синтаксис Razor C# переменные Razor C# Loops Razor C# логика Razor VB переменные Razor VB Loops Razor VB логика

ASP.NET MVC

MVC вступление MVC заявка MVC Папки MVC раскладка MVC Контроллеры MVC Просмотры MVC База данных MVC модель MVC Безопасность MVC HTML Помощники MVC Публиковать MVC Справка

WF Учебники

WebForms вступление WebForms страницы WebForms управления WebForms Мероприятия WebForms формы WebForms ViewState WebForms Текстовое окно WebForms кнопка WebForms Связывание данных WebForms ArrayList WebForms Хеш-таблица WebForms SortedList WebForms XML файлы WebForms повторитель WebForms DataList WebForms DbConnection WebForms Master страницы WebForms навигация WebForms Примеры


 

ASP.NET Веб-страница - Диаграмма Helper


Диаграмма 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();}
}
Выполнить пример »