ASP.NET Web Pages - Chart Helper
Chart Helper – Einer der vielen nützlichen ASP.NET Web Helper.
Chart Helper
In den vorherigen Kapiteln haben Sie gelernt, wie man ASP.NET „Helper“ verwendet.
Zuvor wurde vorgestellt, wie man den „WebGrid Helper“ verwendet, um Daten in einem Raster anzuzeigen.
Dieses Kapitel stellt vor, wie Sie den „Chart Helper“ verwenden, um Daten in grafischer Form anzuzeigen.
Der „Chart Helper“ kann Diagrammbilder verschiedener Typen mit vielen Formatierungsoptionen und Beschriftungen erstellen. Er kann Standarddiagramme wie Flächendiagramme, Balkendiagramme, Säulendiagramme, Liniendiagramme, Kreisdiagramme sowie spezialisiertere Diagramme wie Börsendiagramme erstellen.
Die in einem Diagramm angezeigten Daten können aus einem Array, einer Datenbank oder einer Datei stammen.
Diagramme aus Arrays erstellen
Das folgende Beispiel zeigt den Code, der erforderlich ist, um ein Diagramm basierend auf Array-Daten anzuzeigen:
Beispiel
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();
}
Beispiel ausführen »
- new ChartErstellt ein neues Diagrammobjekt und legt dessen Breite und Höhe fest
- AddTitleMethode legt den Titel des Diagramms fest
- AddSeriesMethode fügt dem Diagramm Daten hinzu
- chartTypeParameter definiert den Diagrammtyp
- xValueParameter definiert den Namen der X-Achse
- yValuesParameter definiert den Namen der Y-Achse
- Write()Methode zeigt das Diagramm an
Diagramme aus einer Datenbank erstellen
Sie können eine Datenbankabfrage ausführen und dann die Daten aus den Abfrageergebnissen verwenden, um ein Diagramm zu erstellen:
Beispiel
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();
}
Beispiel ausführen »
- var db = Database.OpenÖffnet die Datenbank (weist das Datenbankobjekt der Variablen db zu)
- var dbdata = db.QueryFührt die Datenbankabfrage aus und speichert das Ergebnis in dbdata
- new ChartErstellt ein neues Diagrammobjekt und legt dessen Breite und Höhe fest
- AddTitleMethode legt den Titel des Diagramms fest
- DataBindTableMethode bindet die Datenquelle an das Diagramm
- Write()Methode zeigt das Diagramm an
Neben der Verwendung der Methode DataBindTable ist ein weiterer Ansatz die Verwendung von AddSeries (siehe vorheriges Beispiel). DataBindTable ist einfacher zu verwenden, aber AddSeries ist flexibler, da Sie das Diagramm und die Daten expliziter angeben können:
Beispiel
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();
}
Beispiel ausführen »
Diagramme aus XML-Daten erstellen
Eine dritte Möglichkeit zum Erstellen von Diagrammen besteht darin, eine XML-Datei als Datenquelle für das Diagramm zu verwenden:
Beispiel
@{
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();}
}
Beispiel ausführen »