Latest web development tutorials

ASP.NET Web Pages Grafico

Grafico aiutante - uno dei tanti Helper Web ASP.NET utile.


Helper grafico

Nel capitolo precedente, si è appreso come utilizzare ASP.NET di "aiutante".

Come già descritto come utilizzare il "WebGrid aiuto" per visualizzare i dati in una griglia.

Questo capitolo descrive come utilizzare il "Grafico Helper" visualizzato graficamente i dati.

"Helper Chart" in grado di creare diversi tipi di etichette con una varietà di opzioni di formattazione e l'immagine del grafico. E 'possibile creare grafici ad area, grafici a barre, istogrammi, grafici a linee, grafici a torta e altri standard, è possibile creare più grafico professionale come grafici.

graficografico

I dati possono essere visualizzati nel grafico da una matrice, i dati è un database o in un file.


Creare un grafico basato su un array

L'esempio seguente mostra il codice necessario per tracciare i dati dalla matrice:

Esempi

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

esempio »Esecuzione

- New Chart crea un nuovo oggetto grafico e impostare la larghezza e l'altezza

- Metodo AddTitle specifica il titolo del grafico

- AddSeries metodo per aumentare i dati a un grafico

- Parametro ChartType definisce il tipo di grafico

- Parametro NamexValue definisce l'asse x

- Nome parametroyValues definisce l'asse y

- Write () per visualizzare un grafico


Creare un grafico basato sui dati

È possibile eseguire una query di database, e quindi utilizzare i risultati della query di dati per creare un grafico:

Esempi

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

esempio »Esecuzione

- Var db = Database.Open aprire il database (l'oggetto database assegnato alla db variabile)

- Var dbdata = db.Query eseguire una query di database e salvare i risultati in dbdata

- New Chart crea un nuovo oggetto grafico e impostare la larghezza e l'altezza

- Metodo AddTitle specifica il titolo del grafico

- Metodo DataBindTable per associare l'origine dati per il grafico

- Write () per visualizzare un grafico

Oltre a utilizzare al di fuori metodo DataBindTable, un altro metodo è quello di utilizzare AddSeries (vedi esempio precedente). DataBindTable più facile da usare, ma AddSeries più flessibile, perché si può più chiaramente indicare i grafici e dati:

Esempi

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

esempio »Esecuzione


Creare grafici in base ai dati XML

Un terzo metodo è quello di creare un grafico utilizzando i file XML come i dati del grafico:

Esempi

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

esempio »Esecuzione