Le graphique Helper - Un des nombreux Helpers Web ASP.NET utiles.
L'assistant graphique
Dans les chapitres précédents, vous avez appris à utiliser un ASP.NET "Helper" .
Vous avez appris à afficher des données dans une grille à l' aide du "WebGrid Helper" .
Ce chapitre explique comment afficher les données sous forme graphique, en utilisant le "Chart Helper" .
Le "Chart Helper" peut créer des images graphiques de différents types avec de nombreuses options de formatage et des étiquettes. Il peut créer des graphiques standards comme les graphiques de la région, les graphiques à barres, à colonnes, les graphiques linéaires et camemberts, ainsi que des graphiques plus spécialisés comme les graphiques boursiers.
Les données affichées dans un graphique peut provenir d'un tableau, d'une base de données ou à partir des données dans un fichier.
Graphique d'un tableau
L'exemple ci-dessous montre le code nécessaire pour afficher un graphique à partir d'un tableau de valeurs:
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();
} »Exécuter exemple - new Chart crée un nouvel objet graphique et définit sa largeur et la hauteur
- la AddTitle méthode spécifie le titre du graphique
- la AddSeries méthode ajoute des données au tableau
- le chartType paramètre définit le type de graphique
- la xValue paramètre définit les noms d'axe x
- les yValues paramètre définit les valeurs de l' axe des y
- l' Write() méthode affiche le tableau
Graphique A partir des données de base de données
Vous pouvez exécuter une requête de base de données et utiliser les données à partir des résultats pour créer un graphique:
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")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
} »Exécuter exemple - var db = Database.Open ouvre la base de données (et affecte l'objet de base de données à la db variable)
- var dbdata = db.Query exécute une requête de base de données et stocke le résultat dans dbdata
- new Chart crée un nouvel objet graphique et définit sa largeur et la hauteur
- la AddTitle méthode spécifie le titre du graphique
- la DataBindTable méthode se lie à la source de données à la carte
- l' Write() méthode affiche le tableau
Une alternative à l'utilisation de la méthode DataBindTable est d'utiliser AddSeries (Voir exemple précédent). DataBindTable est plus facile à utiliser, mais AddSeries est plus souple, car vous pouvez spécifier le graphique et les données de manière plus explicite:
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();
} »Exécuter exemple Graphique à partir de données XML
La troisième option pour dresser une carte est d'utiliser un fichier XML que les données du 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();}
} »Exécuter exemple