Ultimele tutoriale de dezvoltare web
 

ASP.NET Pagini Web - Graficul Helper


Diagrama de Helper - unul dintre multele utile Helpers ASP.NET Web.


Graficul de Helper

În capitolele anterioare, ați învățat cum să folosească un ASP.NET "Helper" .

Ai învățat cum să afișați date într - o grilă folosind "WebGrid Helper" .

Acest capitol explică modul de afișare a datelor în formă grafică, folosind "Chart Helper" .

"Chart Helper" poate crea diagramă imagini de diferite tipuri , cu mai multe opțiuni de formatare și etichete. Se poate crea diagrame standard, cum ar fi diagrame zonă, diagrame bară, diagrame coloană, diagrame linie, și diagrame plăcintă, împreună cu diagrame mai specializate, cum ar fi diagrame stoc.

diagramădiagramă

Datele pe care le afișați într-o diagramă poate fi dintr-o matrice, dintr-o bază de date, sau de la date într-un fișier.


Grafic dintr-o matrice

Exemplul de mai jos arată codul necesar pentru a afișa o diagramă dintr-o matrice de valori:

Exemplu

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

- new Chart creează un nou obiect grafic și stabilește lățimea și înălțimea

- pentru AddTitle metoda specifică titlul diagramă

- pentru AddSeries metoda se adaugă date în diagramă

- pentru chartType parametrul definește tipul de diagramă

- pentru xValue parametru definește numele axa x

- pentru yValues Parametrul definește valorile axa y

- pentru Write() metoda afișează graficul


Diagrama de date din baza de date

Puteți rula o interogare a bazei de date și apoi utilizați date din rezultatele pentru a crea o diagramă:

Exemplu

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

- var db = Database.Open deschide baza de date (și atribuie obiectul bază de date la db variabilă)

- var dbdata = db.Query se execută o interogare a bazei de date și stochează rezultatul în dbdata

- new Chart creează un nou obiect grafic și stabilește lățimea și înălțimea

- pentru AddTitle metoda specifică titlul diagramă

- pentru DataBindTable metoda leagă sursa de date la diagramă

- pentru Write() metoda afișează graficul

O alternativă la utilizarea metodei DataBindTable este de a folosi AddSeries (A se vedea exemplul anterior). DataBindTable este mai ușor de utilizat, dar AddSeries este mai flexibilă, deoarece puteți specifica grafic și date mai explicit:

Exemplu

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

Diagrama din datele XML

A treia opțiune pentru a trasa este de a utiliza un fișier XML ca datele pentru diagramă:

Exemplu

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