Diagram Halaman Web ASP.NET

Chart Helper - Salah satu dari banyak pembantu web ASP.NET yang berguna.

Data dapat ditampilkan dalam grafik dengan menggunakan Chart helper. Bagian ini menjelaskan penggunaan spesifik dari Chart helper.

Pembantu bagan

Pada bab sebelumnya, Anda telah mempelajari cara menggunakan "pembantu" ASP.NET.

Kami telah menjelaskan cara menggunakan "WebGrid Helper" untuk menampilkan data dalam grid.

Bab ini menjelaskan cara menggunakan Chart Helper untuk menampilkan data secara grafis.

"Chart Helper" dapat membuat berbagai jenis gambar bagan dengan berbagai pilihan format dan label. Itu dapat membuat diagram standar seperti diagram area, diagram batang, diagram kolom, diagram garis, diagram lingkaran, dll., serta diagram yang lebih profesional seperti diagram saham.

Data yang ditampilkan dalam bagan bisa berasal dari array, database, atau file.

Buat bagan dari array

Contoh berikut menunjukkan kode yang diperlukan untuk menampilkan grafik berdasarkan data array:

Contoh

 @{ var myChart = Bagan baru(lebar: 600, tinggi: 400) .AddTitle("Karyawan") .AddSeries(chartType: "column",xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" }, yNilai: baru[] { "2", "6", "4", "5", "3" }) .Tulis();}

- Bagan baru membuat objek bagan baru dan mengatur lebar dan tingginya

- Metode AddTitle menentukan judul grafik

- Metode AddSeries menambahkan data ke grafik

- Parameter chartType menentukan jenis bagan

- Parameter xValue mendefinisikan nama sumbu x

- Parameter yValues ​​​​mendefinisikan nama sumbu y

- Metode Write() menampilkan grafik

Buat bagan berdasarkan database

Anda bisa menjalankan kueri database dan kemudian menggunakan data dari hasil kueri untuk membuat bagan:

Contoh

 @{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("PILIH Nama, Harga DARI Produk"); var myChart = Bagan baru(lebar: 600, tinggi: 400) .AddTitle("Produk Penjualan") .DataBindTable(dataSource: dbdata, xField: "Name").Write();}

- var db = Database.Open membuka database (menetapkan objek database ke variabel db)

- var dbdata = db.Query mengeksekusi query database dan menyimpan hasilnya di dbdata

- Bagan baru membuat objek bagan baru dan mengatur lebar dan tingginya

- Metode AddTitle menentukan judul grafik

- Metode DataBindTable mengikat sumber data ke grafik

- Metode Write() menampilkan grafik

Alternatif untuk menggunakan metode DataBindTable adalah dengan menggunakan AddSeries (lihat contoh sebelumnya). DataBindTable lebih mudah digunakan, namun AddSeries lebih fleksibel karena Anda dapat menentukan bagan dan data secara lebih eksplisit:

Contoh

 @{ var db = Database.Open("SmallBakery"); var dbdata = db.Query("PILIH Nama, Harga DARI Produk"); var myChart = Bagan baru(lebar: 600, tinggi: 400) .AddTitle("Produk Penjualan") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "Nama",yNilai: dbdata, yBidang: "Harga").Write();}

Buat bagan dari data XML

Cara ketiga untuk membuat bagan adalah dengan menggunakan file XML sebagai data bagan:

Contoh

 @menggunakan System.Data;@{var dataSet = new DataSet();dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));dataSet.ReadXml(Server.MapPath("data.xml"));var dataView = DataView baru(dataSet.Tables[0]);var myChart = Bagan baru(lebar: 600, tinggi: 400).AddTitle("Penjualan Per Karyawan").AddSeries("Default", chartType: "Pie",xValue: dataView, xField: "Name",yValues: dataView, yFields: "Sales").Write();} }

Di atas adalah pengenalan penggunaan Chart helper.