Pages Web ASP.NET - Chart Helper

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

Chart Helper

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 "Chart Helper" pour afficher les données sous forme graphique.

"Chart Helper" peut créer différents types d'images graphiques avec diverses 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.

Les données affichées dans le graphique peuvent provenir d'un tableau, d'une base de données ou d'un fichier.

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 :

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

- nouveau graphique Créez un nouvel objet Chart et définissez 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 Le paramètre définit le type de graphique

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

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

- Write() La méthode affiche le graphique

Crée un graphique basé sur la base de données

Vous pouvez exécuter une requête de base de données, puis utilise 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 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 Ouvrir la base de données (attribuer l'objet de base de données à la variable db)

- var dbdata = db.Query Exécuter le requête de base de données et enregistrez les résultats dans dbdata

- nouveau graphique Créez un nouvel objet graphique et définissez sa largeur et sa hauteur

- AddTitle méthode spécifiée 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 est d'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 :

@{ 
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éez des graphiques basés sur des données XML

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