Halaman Web ASP.NET - Pembantu Carta

Pembantu Carta - Salah satu daripada banyak Pembantu Web ASP.NET yang berguna.

Pembantu Carta

Dalam bab sebelumnya, anda telah mempelajari cara menggunakan "pembantu" ASP.NET.

Kami telah pun memperkenalkan cara menggunakan "WebGrid Helper" untuk memaparkan data dalam grid.

Bab ini memperkenalkan cara menggunakan "Pembantu Carta" untuk memaparkan data dalam bentuk grafik.

"Pembantu Carta" boleh mencipta pelbagai jenis imej carta dengan pelbagai pilihan pemformatan dan label. Ia boleh mencipta carta standard seperti carta kawasan, carta bar, carta lajur, carta garis, carta pai, dsb., serta carta yang lebih profesional seperti carta saham.

Data yang dipaparkan dalam carta boleh daripada tatasusunan, pangkalan data atau fail.

Membuat carta daripada tatasusunan

Contoh berikut menunjukkan kod yang diperlukan untuk memaparkan carta berdasarkan data tatasusunan:

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

- Carta baharu Cipta objek Carta yang baharu dan tetapkan lebar dan tingginya

- Kaedah AddTitle menentukan tajuk carta

- kaedah AddSeries menambah data pada carta

- chartType Parameter mentakrifkan jenis carta

- xValue Parameter mentakrifkan nama paksi-x

- yValues Parameter mentakrifkan nama paksi-y

- Tulis() Kaedah memaparkan carta

Mencipta carta berdasarkan pangkalan data

Anda boleh melaksanakan pertanyaan Pangkalan Data, kemudian menggunakan data daripada hasil pertanyaan untuk mencipta carta:

@{ 
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 = Pangkalan Data.Buka Buka pangkalan data (tetapkan objek pangkalan data kepada pembolehubah db)

- var dbdata = db.Query Laksanakan pertanyaan pangkalan data dan Simpan keputusan dalam dbdata

- Carta baharu Cipta objek carta baharu dan tetapkan lebar dan tingginya

- TambahTajuk kaedah yang ditentukan Tajuk carta

- Kaedah DataBindTable mengikat sumber data pada carta

- Kaedah Write() memaparkan carta

Alternatif untuk menggunakan kaedah DataBindTable ialah menggunakan AddSeries (lihat contoh sebelumnya). DataBindTable lebih mudah digunakan, tetapi AddSeries lebih fleksibel kerana anda boleh menentukan carta dan data dengan lebih jelas:

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

Buat carta berdasarkan data 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();
}