Pagine Web ASP.NET - L'helper grafico
The Chart Helper - Uno dei tanti utili Web Helper di ASP.NET.
L'aiutante della carta
Nei capitoli precedenti, hai imparato come utilizzare un "Helper" di ASP.NET.
Hai imparato a visualizzare i dati in una griglia usando "WebGrid Helper".
Questo capitolo spiega come visualizzare i dati in forma grafica, utilizzando "Chart Helper".
Il "Chart Helper" può creare immagini di grafici di diversi tipi con molte opzioni di formattazione ed etichette. Può creare grafici standard come grafici ad area, grafici a barre, istogrammi, grafici a linee e grafici a torta, insieme a grafici più specializzati come grafici azionari.
I dati visualizzati in un grafico possono provenire da una matrice, da un database o da dati in un file.
Grafico da una matrice
L'esempio seguente mostra il codice necessario per visualizzare un grafico da una matrice di valori:
Esempio
@{
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 crea un nuovo oggetto grafico e ne imposta la larghezza e l'altezza
- il metodo AddTitle specifica il titolo del grafico
- il metodo AddSeries aggiunge dati al grafico
- il parametro chartType definisce il tipo di grafico
- il parametro xValue definisce i nomi degli assi x
- il parametro yValues definisce i valori dell'asse y
- il metodo Write() visualizza il grafico
Grafico dai dati del database
È possibile eseguire una query del database e quindi utilizzare i dati dei risultati per creare un grafico:
Esempio
@{
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 apre il database (e assegna l'oggetto database alla variabile db)
- var dbdata = db.Query esegue una query del database e memorizza il risultato in dbdata
- nuovo Grafico crea un nuovo oggetto grafico e ne imposta la larghezza e l'altezza
- il metodo AddTitle specifica il titolo del grafico
- il metodo DataBindTable associa l'origine dati al grafico
- il metodo Write() visualizza il grafico
Un'alternativa all'utilizzo del metodo DataBindTable consiste nell'utilizzare AddSeries (vedere l'esempio precedente). DataBindTable è più facile da usare, ma AddSeries è più flessibile perché puoi specificare il grafico e i dati in modo più esplicito:
Esempio
@{
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();
}
Grafico da dati XML
La terza opzione per la creazione di grafici consiste nell'utilizzare un file XML come dati per il grafico:
Esempio
@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();}
}
Riferimento oggetto grafico
| 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. |