ASP.NET Web Pages - Chart Helper

Chart - jeden z wielu użytecznych ASP.NET Web Helperów.

Chart Helper

W poprzednim rozdziale nauczyłeś się, jak używać ASP.NET "Helper".

Nauczyłeś się już, jak wyświetlać dane w siatce za pomocą "WebGrid Helper".

Rozdział ten wyjaśnia, jak wyświetlać dane w wykresie, używając "Chart Helper".

"Chart Helper" może tworzyć różne typy obrazów wykresów za pomocą wielu formatów i znaczników. Może tworzyć standardowe wykresy, takie jak wykresy powierzchniowe, wykresy słupkowe, wykresy kolumnowe, wykresy liniowe i wykresy kołowe, oraz bardziej profesjonalne wykresy (np. wykresy kursów akcji).

Dane wyświetlone na wykresie mogą pochodzić z tablicy, bazy danych lub pliku.

Wykres z tablicy

Poniższy przykład kodu wyświetla wykres za pomocą danych z tablicy:

Przykład

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

Uruchom przykład

new Chart tworzy nowy obiekt wykresu i ustawia jego szerokość i wysokość.

AddTitle metoda określa tytuł wykresu.

AddSeries metoda dodaje dane do wykresu.

chartType parametr definiuje typ wykresu.

xValue parametr definiuje wartości osi X.

yValues parametr definiuje wartości osi Y.

Write() metoda wyświetla wykres.

Wykres z bazy danych

Możesz najpierw uruchomić zapytanie bazy danych, a następnie użyć wyników z danych do utworzenia wykresu:

Przykład

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Sprzedaż produktów") 
   .DataBindTable(dataSource: dbdata, xField: "Name")
   .Write();
}

Uruchom przykład

var db = Database.Open otwiera bazę danych (i przypisuje obiekt bazy danych do zmiennej db).

var dbdata = db.Query uruchamia zapytanie bazy danych i zapisuje wyniki do dbdata.

new Chart tworzy nowy obiekt wykresu i ustawia jego szerokość i wysokość.

AddTitle metoda określa tytuł wykresu.

DataBindTable metoda przypisuje źródło danych do wykresu.

Write() metoda wyświetla wykres.

Alternatywą dla metody DataBindTable jest użycie AddSeries (zobacz poprzedni przykład). Metoda DataBindTable jest łatwiejsza w użyciu, ale AddSeries ma większą elastyczność, ponieważ pozwala na bardziej precyzyjne określenie wykresu i danych:

Przykład

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Sprzedaż produktów") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

Uruchom przykład

Wykres z danych XML

Trzecia opcja generowania wykresu to użycie pliku XML jako danych wykresu:

Przykład

@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("Sprzedaż na pracownika")
   .AddSeries("Default", chartType: "Pie",
      xValue: dataView, xField: "Name",
      yValues: dataView, yFields: "Sales")
   .Write();}
}

Uruchom przykład