Halaman Web ASP.NET - Pembantu Bagan
Pembantu Bagan - Salah satu dari banyak Pembantu Web ASP.NET yang berguna.
Pembantu Grafik
Dalam bab-bab sebelumnya, Anda telah mempelajari cara menggunakan "Helper" ASP.NET.
Anda telah mempelajari cara menampilkan data dalam kisi menggunakan "WebGrid Helper".
Bab ini menjelaskan cara menampilkan data dalam bentuk grafik, menggunakan "Chart Helper".
"Pembantu Bagan" dapat membuat gambar bagan dari berbagai jenis dengan banyak opsi pemformatan dan label. Itu dapat membuat bagan standar seperti bagan area, bagan batang, bagan kolom, bagan garis, dan bagan pai, bersama dengan bagan yang lebih khusus seperti bagan saham.
Data yang Anda tampilkan dalam bagan bisa dari larik, dari database, atau dari data dalam file.
Bagan Dari Array
Contoh di bawah ini menunjukkan kode yang diperlukan untuk menampilkan bagan dari larik nilai:
Contoh
@{
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();
}
- Bagan baru membuat objek bagan baru dan mengatur lebar dan tingginya
- metode AddTitle menentukan judul bagan
- metode AddSeries menambahkan data ke grafik
- parameter chartType mendefinisikan jenis grafik
- parameter xValue mendefinisikan nama sumbu x
- parameter yValues mendefinisikan nilai sumbu y
- metode Write() menampilkan grafik
Bagan Dari Data Basis Data
Anda bisa menjalankan kueri database lalu menggunakan data dari hasil untuk membuat bagan:
Contoh
@{
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 membuka database (dan menetapkan objek database ke variabel db)
- var dbdata = db.Query menjalankan query database dan menyimpan hasilnya di dbdata
- Bagan baru membuat bagan objek baru dan mengatur lebar dan tingginya
- metode AddTitle menentukan judul bagan
- metode DataBindTable mengikat sumber data ke bagan
- metode Write() menampilkan grafik
Alternatif untuk menggunakan metode DataBindTable adalah dengan menggunakan AddSeries (Lihat contoh sebelumnya). DataBindTable lebih mudah digunakan, tetapi AddSeries lebih fleksibel karena Anda dapat menentukan bagan dan data secara lebih eksplisit:
Contoh
@{
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();
}
Bagan Dari Data XML
Opsi ketiga untuk pembuatan bagan adalah menggunakan file XML sebagai data untuk bagan:
Contoh
@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();}
}
Referensi Objek Bagan
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |