Latest web development tutorials

ASP.NET Páginas Web Chart

Gráfico ajudante - um dos muitos Helper Web ASP.NET útil.


Helper Gráfico

No capítulo anterior, você aprendeu a usar o ASP.NET "helper".

Como já foi descrito como usar o "helper WebGrid" para exibir dados em uma grade.

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

"Helper Chart" pode criar diferentes tipos de etiquetas com uma variedade de opções de formatação e a imagem do gráfico. Ele pode criar gráficos de área, gráficos de barras, gráficos de colunas, gráficos de linha, gráficos de pizza e outros padrões, ele pode criar gráfico mais profissional como gráficos de ações.

gráficográfico

Os dados podem ser exibidos no gráfico de uma matriz, os dados é um banco de dados ou um arquivo.


Criar um gráfico com base em uma matriz

O exemplo a seguir mostra o código necessário para mapear os dados do array:

Exemplos

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

Correndo instância »

- Novo Gráfico cria um novo objeto de gráfico e definir a sua largura e altura

- Método AddTitle especifica o título do gráfico

- AddSeries método para aumentar os dados a um gráfico

- Parâmetro ChartType define o tipo de gráfico

- Parâmetro NomexValor define o eixo-x

- Nome do parâmetroyValues define o eixo-y

- Write () método para exibir um gráfico


Criar um gráfico baseado em banco de dados

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

Exemplos

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

Correndo instância »

- Var db = database.user abrir o banco de dados (o objeto de banco de dados atribuído à db variável)

- Var dbdata = db.Query executar uma consulta de banco de dados e salvar os resultados no dbdata

- Novo Gráfico cria um novo objeto de gráfico e definir a sua largura e altura

- Método AddTitle especifica o título do gráfico

- Método DataBindTable para ligar a fonte de dados para o gráfico

- Write () método para exibir um gráfico

Além da utilização de fora método DataBindTable, outro método é utilizar AddSeries (ver exemplo anterior). DataBindTable mais fácil de usar, mas AddSeries mais flexível, porque você pode especificar mais claramente os gráficos e dados:

Exemplos

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

Correndo instância »


Criar gráficos com base em dados XML

Um terceiro método é criar um gráfico usando arquivos XML como os dados do gráfico:

Exemplos

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

Correndo instância »