ASP.NET Web Pages - Chart Helper
Chart Helper - L’un des nombreux helpers Web ASP.NET utiles.
Chart Helper
Dans les chapitres précédents, vous avez appris à utiliser les « Helpers » ASP.NET.
Précédemment, il a été expliqué comment utiliser le « WebGrid Helper » pour afficher des données dans une grille.
Ce chapitre présente comment utiliser le « Chart Helper » pour afficher des données sous forme graphique.
Le « Chart Helper » peut créer des images de graphiques de différents types avec de nombreuses options de mise en forme et étiquettes. Il peut créer des graphiques standard comme les graphiques en aires, les graphiques à barres, les graphiques à colonnes, les graphiques en courbes, les graphiques en secteurs, ainsi que des graphiques plus spécialisés comme les graphiques boursiers.
Les données affichées dans un graphique peuvent provenir d’un tableau, d’une base de données ou d’un fichier.
Création de graphiques à partir de tableaux
L’exemple suivant montre le code requis pour afficher un graphique basé sur des données de 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();
}
Exécuter l'exemple »
- new ChartCréer un nouvel objet graphique et définir sa largeur et sa hauteur
- AddTitleLa méthode spécifie le titre du graphique
- AddSeriesLa méthode ajoute des données au graphique
- chartTypeLe paramètre définit le type de graphique
- xValueLe paramètre définit le nom de l'axe des x
- yValuesLe paramètre définit le nom de l'axe des y
- Write()La méthode affiche le graphique
Création de graphiques à 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 :
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 l'exemple »
- var db = Database.OpenOuvrir la base de données (assigner l'objet de base de données à la variable db)
- var dbdata = db.QueryExécuter la requête de base de données et enregistrer le résultat dans dbdata
- new ChartCréer un nouvel objet graphique et définir sa largeur et sa hauteur
- AddTitleLa méthode spécifie le titre du graphique
- DataBindTableLa méthode lie la source de données au graphique
- Write()La méthode affiche le graphique
Outre l'utilisation de la méthode DataBindTable, une autre approche 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();
}
Exécuter l'exemple »
Création de graphiques à partir de données XML
Une troisième façon de créer des graphiques consiste à utiliser un fichier XML comme données du graphique :
Exemple
@{
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("Ventes par employé")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}
Exécuter l'exemple »