ASP.NET Web Pages - Chart Helper

Chart - один из множества полезных ASP.NET Web Helper.

Chart 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 Параметр определяет тип графика.

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

Запуск примера