Схема веб-страниц ASP.NET

Chart Helper — один из многих полезных веб-помощников ASP.NET.

Данные можно отображать в диаграммах с помощью помощника по диаграммам. В этом разделе объясняется конкретное использование помощника по диаграммам.

Помощник по диаграммам

В предыдущих главах вы узнали, как использовать «помощники» ASP.NET.

Мы уже описали, как использовать «Помощник WebGrid» для отображения данных в сетке.

В этой главе описывается, как использовать Помощник по диаграммам для графического отображения данных.

«Помощник по диаграммам» может создавать различные типы изображений диаграмм с различными параметрами форматирования и метками. Он может создавать стандартные диаграммы, такие как диаграммы с областями, гистограммы, гистограммы, линейные диаграммы, круговые диаграммы и т. д., а также более профессиональные диаграммы, такие как биржевые диаграммы.

Данные, отображаемые на диаграмме, могут поступать из массива, базы данных или файла.

Создать диаграмму из массива

В следующем примере показан код, необходимый для отображения диаграммы на основе данных массива:

Пример

 @{ var myChart = new Chart(width: 600, height: 400).AddTitle("Сотрудники") .AddSeries(chartType: "column",xValue: new[] { "Питер", "Эндрю", "Джули", "Мэри", "Дэйв" }, yValues: new[] { "2", "6", "4", "5", "3" }) .Write();}

- новая диаграмма создает новый объект диаграммы и устанавливает его ширину и высоту.

- Метод 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 = new Chart(ширина: 600, высота: 400) .AddTitle("Продукт) Продажи").AddSeries(chartType:"Pie",xValue: dbdata, xField: «Имя»,yValues: dbdata, yFields: «Цена»).Write();}

Создание диаграмм из данных XML

Третий способ создания диаграммы — использовать XML-файл в качестве данных диаграммы:

Пример

 @using 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: "Продажи").Write();} }

Выше приведено введение в использование помощника по диаграмме.