Páginas web ASP.NET : el ayudante de gráficos
The Chart Helper: uno de los muchos asistentes web útiles de ASP.NET.
El ayudante de gráficos
En los capítulos anteriores, aprendió a usar un "Ayudante" de ASP.NET.
Aprendió a mostrar datos en una cuadrícula usando el "Ayudante de WebGrid".
Este capítulo explica cómo mostrar datos en forma gráfica, utilizando el "Ayudante de gráfico".
El "Ayudante de gráficos" puede crear imágenes de gráficos de diferentes tipos con muchas opciones de formato y etiquetas. Puede crear gráficos estándar como gráficos de áreas, gráficos de barras, gráficos de columnas, gráficos de líneas y gráficos circulares, junto con gráficos más especializados como gráficos de acciones.
Los datos que muestra en un gráfico pueden ser de una matriz, de una base de datos o de datos en un archivo.
Gráfico de una matriz
El siguiente ejemplo muestra el código necesario para mostrar un gráfico a partir de una matriz de valores:
Ejemplo
@{
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 crea un nuevo objeto de gráfico y establece su ancho y alto
- el método AddTitle especifica el título del gráfico
- el método AddSeries agrega datos al gráfico
- el parámetro chartType define el tipo de gráfico
- el parámetro xValue define los nombres del eje x
- el parámetro yValues define los valores del eje y
- el método Write() muestra el gráfico
Gráfico de datos de la base de datos
Puede ejecutar una consulta de base de datos y luego usar los datos de los resultados para crear un gráfico:
Ejemplo
@{
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 abre la base de datos (y asigna el objeto de la base de datos a la variable db)
- var dbdata = db.Query ejecuta una consulta de base de datos y almacena el resultado en dbdata
- new Chart crea un nuevo objeto de gráfico y establece su ancho y alto
- el método AddTitle especifica el título del gráfico
- el método DataBindTable vincula la fuente de datos al gráfico
- el método Write() muestra el gráfico
Una alternativa al método DataBindTable es usar AddSeries (consulte el ejemplo anterior). DataBindTable es más fácil de usar, pero AddSeries es más flexible porque puede especificar el gráfico y los datos de manera más explícita:
Ejemplo
@{
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();
}
Gráfico a partir de datos XML
La tercera opción para graficar es usar un archivo XML como datos para el gráfico:
Ejemplo
@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();}
}
Referencia de objetos de gráfico
| 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. |