Chart Helper - L'un des nombreux assistants Web ASP.NET utiles.
Les données peuvent être affichées dans un graphique à l'aide de l'assistant Graphique. Cette section explique l'utilisation spécifique de l'assistant Graphique.
Dans les chapitres précédents, vous avez appris à utiliser les « helpers » ASP.NET.
Nous avons déjà décrit comment utiliser le "WebGrid Helper" pour afficher des données dans une grille.
Ce chapitre décrit comment utiliser Chart Helper pour afficher les données sous forme graphique.
Le "Chart Helper" peut créer différents types d'images graphiques avec une variété d'options de formatage et d'é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.
Les données affichées dans le graphique peuvent provenir d'un tableau, d'une base de données ou d'un fichier.
L'exemple suivant montre le code requis pour afficher un graphique basé sur les données d'un tableau :
@{ var myChart = new Chart(largeur : 600, hauteur : 400) .AddTitle("Employés") .AddSeries(chartType : "column",xValue : new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yValues : new[] { "2", "6", "4", "5", "3" }) .Écrire();}- new Chart crée un nouvel objet graphique et définit sa largeur et sa hauteur
- La méthode AddTitle précise le titre du graphique
- La méthode AddSeries ajoute des données au graphique
- Le paramètre chartType définit le 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 y
- La méthode Write() affiche le graphique
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 :
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Nom, Prix FROM Produit"); var myChart = new Chart(largeur : 600, hauteur : 400) .AddTitle("Produit Ventes") .DataBindTable(dataSource : dbdata, xField : "Nom").Write();}- var db = Database.Open ouvre la base de données (affecte l'objet de base de données à la variable db)
- var dbdata = db.Query exécute une requête de base de données et enregistre les résultats dans dbdata
- new Chart crée un nouvel objet graphique et définit sa largeur et sa hauteur
- La méthode AddTitle précise le titre du graphique
- La méthode DataBindTable lie la source de données au 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 de manière plus explicite :
@{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("SELECT Nom, Prix FROM Produit"); var myChart = new Chart(largeur : 600, hauteur : 400) .AddTitle("Produit Ventes") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "Nom", yValues : dbdata, yFields : "Prix").Write();}Une troisième façon de créer un graphique consiste à utiliser un fichier XML comme données du graphique :
@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(largeur : 600, hauteur : 400).AddTitle("Ventes par employé").AddSeries("Default", chartType : "Pie",xValue : dataView, xField : "Name", yValues : dataView, yFields : "Sales").Write();} }Ce qui précède est une introduction à l’utilisation de Chart Helper.