Pages Web ASP.NET - L'assistant graphique
L'assistant graphique - L'un des nombreux assistants Web ASP.NET utiles.
L'assistant graphique
Dans les chapitres précédents, vous avez appris à utiliser un "Helper" ASP.NET.
Vous avez appris à afficher des données dans une grille à l'aide de "WebGrid Helper".
Ce chapitre explique comment afficher des données sous forme graphique à l'aide du "Chart Helper".
Le "Chart Helper" peut créer des images de graphique de différents types avec de nombreuses 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 et des graphiques à secteurs, ainsi que des graphiques plus spécialisés tels que des graphiques boursiers.
Les données que vous affichez dans un graphique peuvent provenir d'un tableau, d'une base de données ou des données d'un fichier.
Graphique à partir 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();
}
- new Chart 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 AddSeries ajoute des données au graphique
- le paramètre chartType définit le type de graphique
- le paramètre xValue définit les noms des axes x
- le paramètre yValues définit les valeurs de l'axe des ordonnées
- la méthode Write() affiche le graphique
Graphique à partir des données de la base de données
Vous pouvez exécuter une requête de base de données, puis utiliser les données 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();
}
- var db = Database.Open ouvre la base de données (et 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 stocke le résultat dans dbdata
- new Chart 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 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 :
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();
}
Graphique à partir de données XML
La troisième option pour créer un 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();}
}
Référence de l'objet graphique
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |