ASP.NET Web Pages - Chart Helper

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

Chart Helper

Dalam 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 melalui berbagai format dan tag. Dia dapat membuat grafik standar seperti grafik area, grafik batang, grafik bar, grafik garis, dan grafik pie, serta grafik yang lebih khusus (seperti grafik grafik pasar saham).

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

Grafik dari array

Contoh kode di bawah ini menggunakan data dari array untuk menampilkan grafik:

实例

@{ 
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 jenis grafik.

xValue Parameter menentukan nilai sumbu X.

yValues Parameter menentukan nilai sumbu Y.

Write() Metode menampilkan grafik.

Grafik dari database

Anda dapat meluncurkan query database sekali dahulu, kemudian menggunakan data 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 Buka database (dan asosiasikan objek database ke variabel db).

var dbdata = db.Query Melakukan query database dan menyimpan hasilnya ke dbdata.

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

AddTitle Metode menentukan judul grafik.

DataBindTable Metode mengikat sumber data ke grafik.

Write() Metode menampilkan grafik.

Pilihan ganti untuk menggunakan metode DataBindTable adalah menggunakan AddSeries (lihat contoh sebelumnya). DataBindTable lebih mudah digunakan, tetapi AddSeries memiliki fleksibilitas yang lebih kuat, karena ia dapat menentukan dengan lebih tepat 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();}
}

运行实例