Páginas da Web ASP.NET - O Assistente de Gráfico
The Chart Helper - Um dos muitos úteis ASP.NET Web Helpers.
O auxiliar de gráficos
Nos capítulos anteriores, você aprendeu como usar um "Ajudante" ASP.NET.
Você aprendeu como exibir dados em uma grade usando o "WebGrid Helper".
Este capítulo explica como exibir dados em formato gráfico, usando o "Chart Helper".
O "Chart Helper" pode criar imagens de gráficos de diferentes tipos com muitas opções de formatação e rótulos. Ele pode criar gráficos padrão, como gráficos de área, gráficos de barras, gráficos de colunas, gráficos de linhas e gráficos de pizza, além de gráficos mais especializados, como gráficos de ações.
Os dados exibidos em um gráfico podem ser de uma matriz, de um banco de dados ou de dados em um arquivo.
Gráfico de uma matriz
O exemplo abaixo mostra o código necessário para exibir um gráfico de uma matriz de valores:
Exemplo
@{
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 cria um novo objeto de gráfico e define sua largura e altura
- o método AddTitle especifica o título do gráfico
- o método AddSeries adiciona dados ao gráfico
- o parâmetro chartType define o tipo de gráfico
- o parâmetro xValue define os nomes dos eixos x
- o parâmetro yValues define os valores do eixo y
- o método Write() exibe o gráfico
Gráfico dos dados do banco de dados
Você pode executar uma consulta de banco de dados e usar os dados dos resultados para criar um gráfico:
Exemplo
@{
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 o banco de dados (e atribui o objeto de banco de dados à variável db)
- var dbdata = db.Query executa uma consulta de banco de dados e armazena o resultado em dbdata
- new Chart cria um novo objeto de gráfico e define sua largura e altura
- o método AddTitle especifica o título do gráfico
- o método DataBindTable vincula a fonte de dados ao gráfico
- o método Write() exibe o gráfico
Uma alternativa ao uso do método DataBindTable é usar AddSeries (veja o exemplo anterior). DataBindTable é mais fácil de usar, mas AddSeries é mais flexível porque você pode especificar o gráfico e os dados de forma mais explícita:
Exemplo
@{
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 de dados XML
A terceira opção para gráficos é usar um arquivo XML como dados para o gráfico:
Exemplo
@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();}
}
Referência de objeto 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. |