ASP.NET Web Pages - Chart Helper

Chart Helper - один из многих полезных ASP.NET Web Helpers.

Chart Helper

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

Ранее было показано, как использовать "WebGrid Helper" для отображения данных в таблице.

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

"Chart Helper" может создавать изображения диаграмм различных типов с множеством параметров форматирования и подписей. Он может создавать стандартные диаграммы, такие как диаграммы с областями, линейчатые диаграммы, гистограммы, линейные диаграммы, круговые диаграммы, а также более специализированные диаграммы, например биржевые диаграммы.

chartchart

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

Создание диаграмм из массивов

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

Пример

@{
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Параметр определяет тип диаграммы

- xValueПараметр определяет имя оси X

- 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Открыть базу данных (присвоить объект базы данных переменной db)

- 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: "Y")
.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("Продажи на сотрудника")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}

Запустить пример »


Другие расширения