Il Grafico Helper - Uno dei tanti aiutanti ASP.NET Web utili.
Il Helper Grafico
Nei capitoli precedenti, si è appreso come utilizzare un ASP.NET "Helper" .
Hai imparato come visualizzare i dati in una griglia utilizzando il "WebGrid Helper" .
Questo capitolo spiega come visualizzare i dati in forma grafica, utilizzando la "Chart Helper" .
Il "Chart Helper" in grado di creare immagini di diversi tipi di grafico con molte opzioni di formattazione e le etichette. E 'possibile creare grafici standard come grafici ad area, grafici a barre, istogrammi, grafici a linee e grafici a torta, insieme a tabelle più specializzate come grafici.
I dati di visualizzare in un grafico può essere da una matrice, da un database o da dati in un file.
Grafico da un array
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();
} Esempio Run » - new Chart crea un nuovo oggetto grafico e imposta la sua larghezza e l'altezza
- AddTitle metodo specifica il titolo del grafico
- AddSeries metodo aggiunge dati al grafico
- la chartType parametro definisce il tipo di grafico
- l' xValue parametro definisce i nomi asse x
- la yValues parametro definisce i valori dell'asse y
- la Write() metodo visualizza il grafico
Grafico da dati di database
È possibile eseguire una query di database e quindi utilizzare i dati dai 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();
} Esempio Run » - var db = Database.Open apre il database (e assegna l'oggetto di database per il db variabile)
- var dbdata = db.Query esegue una query di database e memorizza il risultato in dbdata
- new Chart crea un nuovo oggetto grafico e imposta la sua larghezza e l'altezza
- AddTitle metodo specifica il titolo del grafico
- la DataBindTable metodo associa l'origine dati al grafico
- la Write() metodo visualizza il grafico
In alternativa all'utilizzo del metodo è quello di utilizzare DataBindTable AddSeries (Vedi esempio precedente). DataBindTable è più facile da usare, ma AddSeries è più flessibile in quanto è possibile specificare il grafico ei dati più esplicitamente:
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();
} Esempio Run » Grafico da dati XML
La terza opzione per la creazione di grafici è quella di utilizzare un file XML come i 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();}
} Esempio Run »