Partager les notes d'étude ASP.NET (9) Graphique des pages Web

Diagram Helper - L'un des nombreux assistants Web ASP.NET utiles.

Aide aux diagrammes

Dans les chapitres précédents, vous avez appris à utiliser les "helpers" d'ASP.NET.

Nous avons déjà expliqué comment utiliser le "WebGrid Helper" pour afficher des données dans une grille.

Ce chapitre explique comment utiliser le Graph Helper pour afficher les données sous forme graphique.

Le "Chart Helper" peut créer différents types d'images graphiques avec plusieurs options de formatage et étiquettes. Il peut créer des graphiques standard tels que des graphiques en aires, des graphiques à barres, des graphiques à colonnes, des graphiques linéaires, des diagrammes circulaires, etc., ainsi que des graphiques plus professionnels comme des graphiques boursiers.

Création d'un graphique à partir d'un tableau

L'exemple suivant montre le code requis pour afficher un graphique basé sur les données d'un tableau :

Exemple

@{ 
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();
}

Création d'un nouveau graphique Un nouvel objet graphique et définir sa largeur et sa hauteur

- La méthode AddTitle spécifie le titre du graphique

- La méthode AddSeries ajoute des données au graphique

- chartType définition du paramètre Type de graphique

- Le paramètre xValue définit le nom de l'axe des x

- Le paramètre yValues ​​définit le nom de l'axe des y

- La méthode Write() affiche le graphique

Créer un graphique à partir d'une base de données

Vous pouvez exécuter une requête de base de données puis utiliser les données des résultats de la requête pour créer un graphique :

Instance

@{ 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 ouvre la base de données (attribue l'objet de base de données à la variable db)

- var dbdata = db.Query exécute la requête de base de données et enregistre les résultats dans dbdata

- le nouveau graphique crée un nouvel objet graphique et définit sa largeur et sa hauteur

- La méthode AddTitle spécifie le titre du graphique

- La méthode DataBindTable lie la source de données du graphique

- La méthode Write() affiche le graphique

Une alternative à l'utilisation de la méthode DataBindTable consiste à utiliser AddSeries (voir l'exemple précédent DataBindTable est plus facile à utiliser, mais). AddSeries est plus flexible car vous pouvez spécifier le graphique et les données plus explicitement :

Exemple

@{ 
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();
}

Création d'un graphique basé sur des données XML

La troisième façon de créer un Le graphique consiste à utiliser un fichier XML comme données pour le graphique :

Exemple

@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();}}

[Recommandations associées]

1 Vidéo gratuite ASP.NET. tutoriel

2. Partager les notes d'étude ASP.NET (1) --WebPages Razor

Partager les notes d'étude ASP.NET (2. )--Introduction aux pages Web

4. Partager les notes d'étude ASP.NET (3) Disposition des pages Web

5 Partager les notes d'étude ASP.NET. (4) Dossier

6. Partager les notes d'étude ASP.NET (5) Page globale AppStart et PageStart

7 Partager ASP.NET. Notes d'étude (8) Aide aux pages Web

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!