La tabla de los ayudantes - Uno de los muchos ayudantes Web ASP.NET útiles.
El Auxiliar Chart
En los capítulos anteriores, ha aprendido cómo utilizar un ASP.NET "Helper" .
Que ha aprendido cómo mostrar los datos en una cuadrícula utilizando el "WebGrid Helper" .
En este capítulo se explica cómo mostrar los datos en forma gráfica, utilizando la "Chart Helper" .
El "Chart Helper" puede crear imágenes de gráficos de diferentes tipos con muchas opciones de formato y etiquetas. Puede crear gráficos estándar, como los gráficos de áreas, de barras, de columnas, de líneas y gráficos circulares, junto con los cuadros más especializados, como los gráficos de acciones.
Los datos se visualiza en un gráfico puede ser de una matriz, a partir de una base de datos, o de los datos en un archivo.
Gráfico de una matriz
El siguiente ejemplo muestra el código necesario para mostrar un gráfico 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();
} Ejecutar ejemplo » - new Chart crea un nuevo objeto de gráfico y establece su anchura y altura
- la AddTitle método especifica el título del gráfico
- la AddSeries método agrega datos al gráfico
- la chartType parámetro define el tipo de gráfico
- la xValue parámetro define nombres del eje x
- la yValues parámetro define los valores del eje
- la Write() método muestra el gráfico
Gráfico de la base de datos de datos
Puede ejecutar una consulta de base de datos y luego utilizar 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();
} Ejecutar ejemplo » - var db = Database.Open abre la base de datos (y asigna el objeto de base de datos a la base de datos variable)
- 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 anchura y altura
- la AddTitle método especifica el título del gráfico
- la DataBindTable método se une la fuente de datos a la tabla
- la Write() método muestra el gráfico
Una alternativa al uso del método DataBindTable es utilizar AddSeries (véase el ejemplo anterior). DataBindTable es más fácil de usar, pero AddSeries es más flexible porque se puede especificar la tabla y los datos de forma 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();
} Ejecutar ejemplo » Gráfico de los datos XML
La tercera opción para la cartografía es utilizar un archivo XML como los datos del 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();}
} Ejecutar ejemplo »