Chart Helper - Salah satu dari banyak berguna Helpers ASP.NET Web.
Chart Helper
Dalam bab-bab sebelumnya, Anda belajar bagaimana menggunakan ASP.NET "Helper" .
Anda belajar bagaimana untuk menampilkan data dalam kotak menggunakan "WebGrid Helper" .
Bab ini menjelaskan cara untuk menampilkan data dalam bentuk grafik, menggunakan "Chart Helper" .
The "Chart Helper" dapat membuat grafik gambar dari berbagai jenis dengan banyak pilihan format dan label. Hal ini dapat membuat grafik standar seperti grafik daerah, bar chart, grafik kolom, grafik garis, dan diagram lingkaran, bersama dengan grafik yang lebih khusus seperti grafik saham.
Data yang Anda ditampilkan dalam grafik bisa dari array, dari database, atau dari data dalam sebuah file.
Grafik Dari Array
Contoh di bawah ini menunjukkan kode yang dibutuhkan untuk menampilkan grafik dari sebuah array 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();
} Menjalankan contoh » - new Chart membuat objek grafik baru dan menetapkan lebar dan tinggi
- yang AddTitle metode menentukan judul grafik
- yang AddSeries metode menambahkan data ke grafik
- yang chartType parameter mendefinisikan jenis grafik
- yang xValue parameter menentukan nama x-axis
- yang yValues parameter mendefinisikan nilai-nilai y-axis
- yang Write() metode menampilkan grafik
Grafik Dari database data
Anda dapat menjalankan query database dan kemudian menggunakan data dari hasil untuk membuat grafik:
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();
} Menjalankan contoh » - var db = Database.Open membuka database (dan memberikan objek database ke db variabel)
- var dbdata = db.Query menjalankan query database dan menyimpan hasilnya dalam dbdata
- new Chart membuat grafik objek baru dan menetapkan lebar dan tinggi
- yang AddTitle metode menentukan judul grafik
- yang DataBindTable metode mengikat sumber data untuk grafik
- yang Write() metode menampilkan grafik
Sebuah alternatif untuk menggunakan metode DataBindTable adalah dengan menggunakan AddSeries (Lihat contoh sebelumnya). DataBindTable lebih mudah untuk digunakan, tetapi AddSeries lebih fleksibel karena Anda dapat menentukan grafik dan data yang 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();
} Menjalankan contoh » Grafik Dari data XML
Pilihan ketiga untuk charting adalah dengan menggunakan file XML sebagai data untuk grafik:
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();}
} Menjalankan contoh »