Веб-страницы ASP.NET — помощник по диаграммам
Помощник по диаграммам — один из многих полезных веб-помощников ASP.NET.
Помощник по диаграммам
В предыдущих главах вы узнали, как использовать «помощник» ASP.NET.
Вы узнали, как отображать данные в сетке с помощью «Помощника WebGrid».
В этой главе объясняется, как отображать данные в графической форме с помощью «Помощника по диаграммам».
«Помощник по диаграммам» может создавать изображения диаграмм разных типов с множеством параметров форматирования и меток. Он может создавать стандартные диаграммы, такие как диаграммы с областями, гистограммы, гистограммы, линейные диаграммы и круговые диаграммы, а также более специализированные диаграммы, такие как биржевые диаграммы.
Данные, отображаемые на диаграмме, могут быть из массива, из базы данных или из данных в файле.
Диаграмма из массива
В приведенном ниже примере показан код, необходимый для отображения диаграммы из массива значений:
Пример
@{
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: "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();}
}
Справочник по объектам диаграммы
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |