Diagrama de páginas da Web ASP.NET

Chart Helper - Um dos muitos ajudantes úteis da web do ASP.NET.

Os dados podem ser exibidos em um gráfico usando o auxiliar Gráfico. Esta seção explica o uso específico do auxiliar Gráfico.

Ajudante de gráfico

Nos capítulos anteriores, você aprendeu como usar "ajudantes" do ASP.NET.

Já descrevemos como usar o "WebGrid Helper" para exibir dados em uma grade.

Este capítulo descreve como usar o Chart Helper para exibir dados graficamente.

O "Chart Helper" pode criar diferentes tipos de imagens de gráficos com uma variedade de 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, gráficos de pizza, etc., bem como gráficos mais profissionais, como gráficos de ações.

Os dados exibidos no gráfico podem vir de uma matriz, banco de dados ou arquivo.

Crie um gráfico a partir de um array

O exemplo a seguir mostra o código necessário para exibir um gráfico baseado em dados de array:

Exemplo

 @{ var meugráfico = novo gráfico (largura: 600, altura: 400) .AddTitle("Employees") .AddSeries(chartType: "column",xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValores: novo[] { "2", "6", "4", "5", "3" }) .Write();}

- new Chart cria um novo objeto 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 o nome do eixo x

- O parâmetro yValues ​​define o nome do eixo y

- O método Write() exibe o gráfico

Crie um gráfico com base no banco de dados

Você pode executar uma consulta ao banco de dados e usar os dados dos resultados da consulta para criar um gráfico:

Exemplo

 @{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Nome, Preço DO Produto"); Vendas") .DataBindTable(dataSource: dbdata, xField: "Nome").Write();}

- var db = Database.Open abre o banco de dados (atribui o objeto de banco de dados à variável db)

- var dbdata = db.Query executa uma consulta ao banco de dados e salva os resultados em dbdata

- new Chart cria um novo objeto 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 Nome, Preço DO Produto"); Vendas") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "Nome",yValues: dbdata, yFields: "Price").Write();}

Crie gráficos a partir de dados XML

Uma terceira maneira de criar um gráfico é usar um arquivo XML como dados do gráfico:

Exemplo

 @usando 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 meuChart = new Chart(largura: 600, altura: 400).AddTitle("Vendas por funcionário").AddSeries("Padrão", chartType: "Torta",xValue: dataView, xField: "Nome",yValues: dataView, yFields: "Vendas").Write();} }

O texto acima é uma introdução ao uso do auxiliar Chart.