ASP.NET Web Pages - Chart Helper

Chart - ένας από τους πολλούς χρήσιμους ASP.NET Web helpers.

Chart Helper

Στο προηγούμενο κεφάλαιο, έμαθετε πώς να χρησιμοποιείτε έναν ASP.NET "helper".

Έχετε μάθει πώς να εμφανίζετε δεδομένα στο grid χρησιμοποιώντας το "WebGrid Helper".

Αυτό το κεφάλαιο εξηγεί πώς να εμφανίζετε δεδομένα στο γράφημα χρησιμοποιώντας το "Chart Helper".

Το "Chart Helper" μπορεί να δημιουργήσει διαφορετικούς τύπους εικόνων γραφημάτων μέσω πολλαπλών μορφών και σημειώσεων. Μπορεί να δημιουργήσει τυπικά γραφήματα, όπως γραφήματα περιοχής, γραφήματα κολόννας, γραφήματα κύλινδρων, γραφήματα γραμμών και γραφήματα πίτας, καθώς και πιο επαγγελματικά γραφήματα (π.χ. γραφήματα τάσεων αγοράς).

Τα δεδομένα που εμφανίζονται στο γράφημα μπορούν να προέρχονται από το array, τη βάση δεδομένων ή το αρχείο.

Γράφημα από array

Το παρακάτω παράδειγμα κώδικα χρησιμοποιεί δεδομένα από το array για να εμφανίσει γραφήματα:

Παράδειγμα

@{ 
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 Δημιουργία νέου αντικειμένου γραφήματος και ρύθμιση της πλάθου και της ύψους του.

AddTitle η μέθοδος καθορίζει τον τίτλο του γραφήματος.

AddSeries Η μέθοδος προσθέτει δεδομένα στο γράφημα.

chartType Ορίζει τον τύπο του γραφήματος.

xValue Ορίζει τις τιμές του άξονα x.

yValues Ορίζει τις τιμές του άξονα y.

Write() η μέθοδος εμφανίζει το γράφημα.

Γράφημα από βάση δεδομένων

Μπορείτε πρώτα να εκτελέσετε μια αναζήτηση βάσης δεδομένων και στη συνέχεια να χρησιμοποιήσετε τα δεδομένα του αποτελέσματος για τη δημιουργία γραφήματος:

Παράδειγμα

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Πωλήσεις Προϊόντων") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Εκτέλεση Παραδείγματος

var db = Database.Open Άνοιγμα βάσης δεδομένων (και προσθήκη του αντικειμένου βάσης δεδομένων στη μεταβλητή db).

var dbdata = db.Query Εκτέλεση ερωτήματος βάσης δεδομένων και αποθήκευση των αποτελεσμάτων στο dbdata.

new Chart Δημιουργία νέου αντικειμένου γραφήματος και ρύθμιση της πλάθου και της ύψους του.

AddTitle η μέθοδος καθορίζει τον τίτλο του γραφήματος.

DataBindTable η μέθοδος συνδέει την πηγή δεδομένων στο γράφημα.

Write() η μέθοδος εμφανίζει το γράφημα.

Αναλογία του μεθόδου DataBindTable είναι η χρήση του AddSeries (βλέπε την προηγούμενη παράδειγμα). Η μεθόδος DataBindTable είναι πιο εύκολη στη χρήση, αλλά το AddSeries έχει μεγαλύτερη ευελιξία, επειδή μπορεί να καθορίσει πιο ακριβώς το γράφημα και τα δεδομένα:

Παράδειγμα

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Πωλήσεις Προϊόντων") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Εκτέλεση Παραδείγματος

Γράφημα από δεδομένα XML

Η τρίτη επιλογή για τη δημιουργία γραφημάτων είναι η χρήση αρχείου 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("Επιχειρηματικές Πωλήσεις ανά Εργαζόμενο")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Εκτέλεση Παραδείγματος