ASP.NET Web Pages - Chart Helper
- Previous Page WebPages WebGrid
- Next Page WebPages Email
Chart - een van de vele nuttige ASP.NET Web helpers.
Chart Helper
In het vorige hoofdstuk heeft u geleerd hoe u een ASP.NET "helper" kunt gebruiken.
U heeft geleerd hoe u data in een raster kunt weergeven met behulp van de "WebGrid Helper".
Dit hoofdstuk legt uit hoe u data in grafieken kunt weergeven door gebruik te maken van de "Chart Helper".
"Chart Helper" kan verschillende soorten grafieken maken in verschillende formaten en markeringen. Het kan standaard grafieken maken, zoals gebiedsdiagrammen, staafdiagrammen, kolommen, lijndiagrammen en cirkeldiagrammen, en ook meer professionele grafieken (zoals beurskoersdiagrammen).
De data die in de grafiek wordt weergegeven kan data zijn uit een array, database of bestand.
Grafiek uit een array
Het volgende voorbeeld toont de code die gebruik maakt van data uit een array om een grafiek weer te geven:
Example
@{
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();
}
Run Instance
new Chart maakt een nieuwe grafiekobject aan en stelt zijn breedte en hoogte in.
AddTitle de methode specificeert de titel van de grafiek.
AddSeries de methode voegt data toe aan de grafiek.
chartType het parameter definieert het type van de grafiek.
xValue het parameter definieert de waarde van de x-as.
yValues het parameter definieert de waarde van de y-as.
Write() de methode om de grafiek weer te geven.
Grafiek uit de database
U kunt eerst een databasezoekopdracht uitvoeren en vervolgens de data uit het resultaat gebruiken om een grafiek te maken:
Example
@{
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();
}
Run Instance
var db = Database.Open opent de database (en wijst het databaseobject toe aan de variabele db).
var dbdata = db.Query voert een databasezoekopdracht uit en slaat het resultaat op in dbdata.
new Chart maakt een nieuwe grafiekobject aan en stelt zijn breedte en hoogte in.
AddTitle de methode specificeert de titel van de grafiek.
DataBindTable de methode bindt de gegevensbron aan de grafiek.
Write() de methode om de grafiek weer te geven.
Een alternatieve oplossing voor het gebruik van de DataBindTable-methode is het gebruik van AddSeries (zie de vorige voorbeeld). DataBindTable is gemakkelijker te gebruiken, maar AddSeries heeft een betere schaalbaarheid omdat het de grafiek en de data nauwkeuriger kan specificeren:
Example
@{
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();
}
Run Instance
Chart from XML data
The third option for generating a chart is to use an XML file as the chart data:
Example
@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();}
}
Run Instance
- Previous Page WebPages WebGrid
- Next Page WebPages Email
