Teilen Sie ASP.NET-Studiennotizen (9) Webseitendiagramm

Diagram Helper – Einer von vielen nützlichen ASP.NET-Webhelfern.

Diagramm-Helfer

In den vorherigen Kapiteln haben Sie gelernt, wie Sie die „Helfer“ von ASP.NET verwenden.

Wie man mit dem „WebGrid Helper“ Daten in einem Raster anzeigt, haben wir bereits vorgestellt.

In diesem Kapitel wird erklärt, wie Sie den Graph Helper verwenden, um Daten grafisch anzuzeigen.

Der „Chart Helper“ kann verschiedene Arten von Diagrammbildern mit mehreren Formatierungsoptionen und Beschriftungen erstellen. Es können Standarddiagramme wie Flächendiagramme, Balkendiagramme, Säulendiagramme, Liniendiagramme, Kreisdiagramme usw. sowie professionellere Diagramme wie Aktiendiagramme erstellt werden.

Erstellen eines Diagramms aus einem Array

Das folgende Beispiel zeigt den Code, der zum Anzeigen eines Diagramms basierend auf Array-Daten 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 erstellen Ein neues Diagrammobjekt und dessen Breite und Höhe festlegen

- AddTitle-Methode gibt den Titel des Diagramms an

- AddSeries-Methode fügt Daten zum Diagramm hinzu

- chartType Parameterdefinition Diagrammtyp

- Der xValue-Parameter definiert den Namen der x-Achse

- Der yValues-Parameter definiert den Namen der y-Achse

- Die Write()-Methode zeigt das Diagramm an

Erstellen Sie ein Diagramm aus einer Datenbank

Sie können eine Datenbankabfrage ausführen und dann die Daten aus den Abfrageergebnissen verwenden, um ein Diagramm zu erstellen:

Instanz

@{ 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 = Datenbank .Open öffnet die Datenbank (weisen Sie das Datenbankobjekt der Variablen db zu)

- var dbdata = db.Query führt die Datenbankabfrage aus und speichert die Ergebnisse in dbdata

- Neues Diagramm erstellt ein neues Diagrammobjekt und legt dessen Breite und Höhe fest

- AddTitle-Methode gibt den Titel des Diagramms an

- DataBindTable-Methode bindet die Datenquelle zum Diagramm

- Write()-Methode zeigt das Diagramm an

Eine Alternative zur Verwendung der DataBindTable-Methode ist die Verwendung von AddSeries (siehe vorheriges Beispiel). 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();
}

Erstellen Sie ein Diagramm basierend auf XML-Daten

Die dritte Möglichkeit zum Erstellen eines Diagramm soll eine XML-Datei als Daten für das Diagramm 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();}}

[Verwandte Empfehlungen]

1. Kostenloses ASP.NET-Video Tutorial

2.

ASP.NET-Studiennotizen teilen (1) --WebPages Razor

3.

ASP.NET-Studiennotizen teilen (2 )--WebPages-Einführung

4. ASP.NET-Studiennotizen teilen (3) Webseiten-Layout

5. ASP.NET-Studiennotizen teilen (4) Ordner

6. ASP.NET-Studiennotizen teilen (5) Global Page AppStart und PageStart

7 Studiennotizen (8) WebPages Helper

Das obige ist der detaillierte Inhalt vonTeilen Sie ASP.NET-Studiennotizen (9) Webseitendiagramm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!