Chart Helper – Einer von vielen nützlichen ASP.NET-Webhelfern.
Mit dem Diagramm-Helfer können Daten in einem Diagramm angezeigt werden. In diesem Abschnitt wird die spezifische Verwendung des Diagramm-Helfers erläutert.
In den vorherigen Kapiteln haben Sie gelernt, wie Sie ASP.NET-„Helfer“ verwenden.
Wir haben bereits beschrieben, wie Sie mit dem „WebGrid Helper“ Daten in einem Raster anzeigen können.
In diesem Kapitel wird beschrieben, wie Sie mit dem Chart Helper Daten grafisch anzeigen.
Der „Chart Helper“ kann verschiedene Arten von Diagrammbildern mit einer Vielzahl von Formatierungsoptionen und Beschriftungen erstellen. Es können Standarddiagramme wie Flächendiagramme, Balkendiagramme, Säulendiagramme, Liniendiagramme, Kreisdiagramme usw. sowie professionellere Diagramme wie Aktiendiagramme erstellt werden.
Die im Diagramm angezeigten Daten können aus einem Array, einer Datenbank oder einer Datei stammen.
Das folgende Beispiel zeigt den Code, der zum Anzeigen eines Diagramms basierend auf Array-Daten erforderlich ist:
@{ 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 dessen Breite und Höhe fest
– Die AddTitle -Methode gibt den Titel des Diagramms an
– Die AddSeries- Methode fügt Daten zum Diagramm hinzu
- Der Parameter chartType definiert den Typ des Diagramms
- Der Parameter xValue definiert den Namen der x-Achse
- Der Parameter yValues definiert den Namen der y-Achse
- Die Methode Write() zeigt das Diagramm an
Sie können eine Datenbankabfrage ausführen und dann die Daten aus den Abfrageergebnissen verwenden, um ein Diagramm zu erstellen:
@{ 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 (weist das Datenbankobjekt der Variablen db zu)
- var dbdata = db.Query führt eine Datenbankabfrage aus und speichert die Ergebnisse in dbdata
- Neues Diagramm erstellt ein neues Diagrammobjekt und legt dessen Breite und Höhe fest
– Die AddTitle -Methode gibt den Titel des Diagramms an
– Die DataBindTable -Methode 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, AddSeries ist jedoch flexibler, da Sie das Diagramm und die Daten expliziter angeben können:
@{ 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();}Eine dritte Möglichkeit, ein Diagramm zu erstellen, besteht darin, eine XML-Datei als Diagrammdaten zu verwenden:
@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("Umsatz pro Mitarbeiter").AddSeries("Default", chartType: "Pie",xValue: dataView, xField: "Name",yValues: dataView, yFields: "Sales").Write();} }Das Obige ist eine Einführung in die Verwendung des Chart-Helfers.