ASP.NET Web Pages - Chart Helper

Chart - salah satu dari banyak helper ASP.NET Web yang berguna.

Chart Helper

Di bab sebelumnya, Anda telah belajar bagaimana menggunakan “Helper” ASP.NET.

Anda telah belajar bagaimana menampilkan data di grid dengan menggunakan “WebGrid Helper”.

Bab ini menjelaskan bagaimana menampilkan data di grafik dengan menggunakan “Chart Helper”.

“Chart Helper” dapat membuat gambar grafik berbagai jenis dengan berbagai format dan tag. Dia dapat membuat grafik standar seperti grafik area, grafik batang, grafik kolom, grafik garis, dan grafik piring, serta grafik yang lebih khusus (seperti grafik arah pasar).

Data yang ditampilkan di grafik dapat berasal dari array, database, atau berkas.

Grafik dari array

Contoh kode di bawah ini menampilkan grafik menggunakan data dari 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 Membuat objek grafik baru dan menetapkan lebar dan tingginya.

AddTitle metode menentukan judul grafik.

AddSeries metode menambahkan data ke grafik.

chartType Parameter menentukan tipe grafik.

xValue Parameter menentukan nilai sumbu X.

yValues Parameter menentukan nilai sumbu Y.

Write() metode menampilkan grafik.

Grafik dari database

Anda dapat melaksanakan kueri database sekali dahulu, lalu menggunakan data yang ada dalam hasil untuk membuat grafik:

实例

@{ 
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 Melaksanakan kueri database dan menyimpan hasilnya ke dbdata.

new Chart Membuat objek grafik baru dan menetapkan lebar dan tingginya.

AddTitle metode menentukan judul grafik.

DataBindTable metode membinaskan sumber data ke grafik.

Write() metode menampilkan grafik.

Alternatif penggunaan metode DataBindTable adalah menggunakan AddSeries (lihat contoh sebelumnya). DataBindTable lebih mudah digunakan, tetapi AddSeries memiliki fleksibilitas yang lebih tinggi, karena ia dapat menentukan lebih akurat grafik dan data:

实例

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

运行实例

来自 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("Sales Per Employee")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

运行实例