Ayudante de gráficos: uno de los muchos ayudantes web ASP.NET útiles.
Los datos se pueden mostrar en un gráfico utilizando el asistente de gráfico. Esta sección explica el uso específico del asistente de gráfico.
En los capítulos anteriores, aprendió a utilizar los "ayudantes" de ASP.NET.
Ya hemos descrito cómo utilizar el "WebGrid Helper" para mostrar datos en una cuadrícula.
Este capítulo describe cómo utilizar Chart Helper para mostrar datos gráficamente.
El "Ayudante de gráficos" puede crear diferentes tipos de imágenes de gráficos con una variedad de 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, gráficos circulares, etc., así como gráficos más profesionales, como gráficos de cotizaciones.
Los datos que se muestran en el gráfico pueden provenir de una matriz, una base de datos o un archivo.
El siguiente ejemplo muestra el código necesario para mostrar un gráfico basado en datos de matriz:
@{ var myChart = new Chart(ancho: 600, alto: 400) .AddTitle("Empleados") .AddSeries(chartType: "column",xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues: nuevo[] { "2", "6", "4", "5", "3" }) .Escribir();}- Nuevo gráfico 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 el nombre del eje x.
- El parámetro yValues define el nombre del eje y
- El método Write() muestra el gráfico.
Puede ejecutar una consulta de base de datos y luego usar los datos de los resultados de la consulta para crear un gráfico:
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECCIONAR Nombre, Precio DEL Producto"); var myChart = new Chart(ancho: 600, alto: 400) .AddTitle("Producto) Ventas") .DataBindTable(dataSource: dbdata, xField: "Nombre").Write();}- var db = Database.Open abre la base de datos (asigna el objeto de la base de datos a la variable db)
- var dbdata = db.Query ejecuta una consulta a la base de datos y guarda los resultados en dbdata
- Nuevo gráfico 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 uso del 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 forma más explícita:
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECCIONAR Nombre, Precio DEL Producto"); var myChart = new Chart(ancho: 600, alto: 400) .AddTitle("Producto) Ventas") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "Nombre",yValues: dbdata, yFields: "Precio").Write();}Una tercera forma de crear un gráfico es utilizar un archivo XML como datos del gráfico:
@using System.Data;@{var dataSet = new DataSet();dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));dataSet.ReadXml(Server.MapPath("data.xml"));var dataView = nuevo DataView(dataSet.Tables[0]);var myChart = nuevo Gráfico(ancho: 600, alto: 400).AddTitle("Ventas por empleado").AddSeries("Default", chartType: "Pie",xValue: dataView, xField: "Nombre",yValues: dataView, yFields: "Sales").Write();} }Lo anterior es una introducción al uso de Chart Helper.