Latest web development tutorials

Tabla de páginas Web ASP.NET

Gráfico ayudante - uno de los muchos ayudante Web ASP.NET útil.


Ayudante Gráfico

En el capítulo anterior ha aprendido a utilizar ASP.NET de "ayudante".

Como ya se ha descrito cómo utilizar el "ayudante WebGrid" para mostrar los datos en una cuadrícula.

En este capítulo se describe cómo utilizar la "tabla de los ayudantes" que se muestra gráficamente los datos.

"Tabla de los ayudantes" puede crear diferentes tipos de etiquetas con una variedad de opciones de formato e imagen del gráfico. Se puede crear gráficos de áreas, gráficos de barras, gráficos de columnas, gráficos de líneas, gráficos circulares y otras normas, se puede crear más gráfico profesional, al igual que los gráficos de acciones.

tablatabla

Los datos se pueden visualizar en el gráfico a partir de una matriz, de datos es una base de datos o un archivo.


Crear un gráfico basado en una matriz

El siguiente ejemplo muestra el código necesario para trazar los datos de la matriz:

Ejemplos

@{
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();
}

Instancia en ejecución »

- Nuevo esquema crea un nuevo objeto gráfico y establece su anchura y altura

- Método AddTitle especifica el título del gráfico

- AddSeries método de aumentar los datos a un gráfico

- ChartType parámetro define el tipo de gráfico

- Nombre parámetroxValue define el eje x

- Nombre del parámetroyValues define el eje y

- Escribir () para mostrar un gráfico


Crear un gráfico basado en la base de datos

Se puede realizar una consulta de base de datos y utilizar los resultados de la consulta de datos para crear un gráfico:

Ejemplos

@{
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();
}

Instancia en ejecución »

- Var db = Database.Open abrir la base de datos (base de datos del objeto asignado a la variable de db)

- Var dbdata = db.Query realizar una consulta de base de datos y guardar los resultados en el dbdata

- Nuevo esquema crea un nuevo objeto gráfico y establece su anchura y altura

- Método AddTitle especifica el título del gráfico

- Método DataBindTable de obligar a la fuente de datos al gráfico

- Escribir () para mostrar un gráfico

Además de utilizar fuera método DataBindTable, otro método es utilizar AddSeries (véase el ejemplo anterior). DataBindTable más fácil de usar, pero AddSeries más flexible, porque se puede especificar más claramente los gráficos y datos:

Ejemplos

@{
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();
}

Instancia en ejecución »


Crear gráficos a partir de datos XML

Un tercer método es crear un gráfico que utiliza archivos XML como los datos del gráfico:

Ejemplos

@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();}
}

Instancia en ejecución »