ASP.NET webpagina's - The Chart Helper
The Chart Helper - Een van de vele handige ASP.NET Web Helpers.
De kaarthelper
In de vorige hoofdstukken hebt u geleerd hoe u een ASP.NET "Helper" gebruikt.
U hebt geleerd hoe u gegevens in een raster kunt weergeven met behulp van de "WebGrid Helper".
In dit hoofdstuk wordt uitgelegd hoe u gegevens in grafische vorm kunt weergeven met behulp van de "Grafiekhelper".
De "Grafiekhelper" kan grafiekafbeeldingen van verschillende typen maken met veel opmaakopties en labels. Het kan standaarddiagrammen maken zoals vlakdiagrammen, staafdiagrammen, kolomdiagrammen, lijndiagrammen en cirkeldiagrammen, samen met meer gespecialiseerde grafieken zoals aandelengrafieken.
De gegevens die u in een diagram weergeeft, kunnen afkomstig zijn uit een array, uit een database of uit gegevens in een bestand.
Grafiek uit een array
Het onderstaande voorbeeld toont de code die nodig is om een grafiek weer te geven uit een reeks waarden:
Voorbeeld
@{
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();
}
- nieuwe kaart maakt een nieuw kaartobject en stelt de breedte en hoogte in
- de methode AddTitle specificeert de titel van de grafiek
- de AddSeries- methode voegt gegevens toe aan de grafiek
- de parameter chartType definieert het type grafiek
- de parameter xValue definieert de namen van de x-as
- de parameter yValues definieert de waarden van de y-as
- de methode Write() geeft de grafiek weer
Grafiek uit databasegegevens
U kunt een databasequery uitvoeren en vervolgens gegevens uit de resultaten gebruiken om een diagram te maken:
Voorbeeld
@{
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 opent de database (en wijst het databaseobject toe aan de variabele db)
- var dbdata = db.Query voert een databasequery uit en slaat het resultaat op in dbdata
- nieuwe kaart maakt een nieuw diagramobject en stelt de breedte en hoogte in
- de methode AddTitle specificeert de titel van de grafiek
- de DataBindTable- methode bindt de gegevensbron aan de grafiek
- de methode Write() geeft de grafiek weer
Een alternatief voor het gebruik van de DataBindTable-methode is om AddSeries te gebruiken (zie vorig voorbeeld). DataBindTable is gemakkelijker te gebruiken, maar AddSeries is flexibeler omdat u het diagram en de gegevens explicieter kunt specificeren:
Voorbeeld
@{
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();
}
Grafiek van XML-gegevens
De derde optie voor grafieken is om een XML-bestand te gebruiken als de gegevens voor de grafiek:
Voorbeeld
@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();}
}
Referentie grafiekobject
| 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. |