ASP.NET-Webseiten – Der Diagramm-Helfer
Der Chart-Helfer – Einer von vielen nützlichen ASP.NET-Web-Helfern.
Der Chart-Helfer
In den vorangegangenen Kapiteln haben Sie gelernt, wie Sie einen ASP.NET-"Helfer" verwenden.
Sie haben gelernt, wie Sie mit dem "WebGrid Helper" Daten in einem Grid anzeigen.
Dieses Kapitel erklärt, wie Sie Daten mit Hilfe des „Chart Helper“ grafisch darstellen.
Der "Chart Helper" kann Diagrammbilder verschiedener Typen mit vielen Formatierungsoptionen und Beschriftungen erstellen. Es kann Standarddiagramme wie Flächendiagramme, Balkendiagramme, Säulendiagramme, Liniendiagramme und Tortendiagramme sowie speziellere Diagramme wie Aktiendiagramme erstellen.
Die Daten, die Sie in einem Diagramm anzeigen, können aus einem Array, aus einer Datenbank oder aus Daten in einer Datei stammen.
Diagramm aus einem Array
Das folgende Beispiel zeigt den Code, der zum Anzeigen eines Diagramms aus einem Array von Werten erforderlich ist:
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();
}
- Neues Diagramm erstellt ein neues Diagrammobjekt und legt seine Breite und Höhe fest
- Die AddTitle- Methode gibt den Diagrammtitel an
- Die AddSeries- Methode fügt dem Diagramm Daten hinzu
- Der Parameter chartType definiert den Diagrammtyp
- Der Parameter xValue definiert x- Achsennamen
- Der Parameter yValues definiert die Werte der y-Achse
- Die Methode Write() zeigt das Diagramm an
Diagramm aus Datenbankdaten
Sie können eine Datenbankabfrage ausführen und dann Daten aus den Ergebnissen 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();
}
- var db = Database.Open öffnet die Datenbank (und weist das Datenbankobjekt der Variablen db zu)
- var dbdata = db.Query führt eine Datenbankabfrage aus und speichert das Ergebnis in dbdata
- Neues Diagramm erstellt ein neues Diagrammobjekt und legt dessen Breite und Höhe fest
- Die AddTitle- Methode gibt den Diagrammtitel an
- Die Methode DataBindTable bindet die Datenquelle an das Diagramm
- Die Methode Write() zeigt das Diagramm an
Eine Alternative zur Verwendung der DataBindTable-Methode ist 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();
}
Diagramm aus XML-Daten
Die dritte Option für die Diagrammerstellung besteht darin, eine XML-Datei als Daten für das Diagramm zu verwenden:
Beispiel
@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();}
}
Diagrammobjekt-Referenz
| 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. |