Strony internetowe ASP.NET — pomocnik wykresów
Pomocnik wykresu — jeden z wielu przydatnych pomocników sieci Web ASP.NET.
Pomocnik wykresu
W poprzednich rozdziałach dowiedziałeś się, jak korzystać z „pomocnika” ASP.NET.
Nauczyłeś się, jak wyświetlać dane w siatce za pomocą „WebGrid Helper”.
W tym rozdziale wyjaśniono, jak wyświetlać dane w formie graficznej za pomocą „Pomocnika wykresu”.
„Pomocnik wykresów” może tworzyć obrazy wykresów różnych typów z wieloma opcjami formatowania i etykietami. Może tworzyć standardowe wykresy, takie jak wykresy warstwowe, wykresy słupkowe, wykresy kolumnowe, wykresy liniowe i wykresy kołowe, a także bardziej wyspecjalizowane wykresy, takie jak wykresy giełdowe.
Dane wyświetlane na wykresie mogą pochodzić z tablicy, z bazy danych lub z danych w pliku.
Wykres z tablicy
Poniższy przykład pokazuje kod potrzebny do wyświetlenia wykresu z tablicy wartości:
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();
}
- nowy Wykres tworzy nowy obiekt wykresu oraz ustawia jego szerokość i wysokość
- metoda AddTitle określa tytuł wykresu
- metoda AddSeries dodaje dane do wykresu
- parametr chartType określa typ wykresu
- parametr xValue definiuje nazwy osi x
- parametr yValues definiuje wartości osi y
- metoda Write() wyświetla wykres
Wykres z danych bazy danych
Możesz uruchomić zapytanie do bazy danych, a następnie użyć danych z wyników 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("Product Sales")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
}
- var db = Database.Open otwiera bazę danych (i przypisuje obiekt bazy danych do zmiennej db)
- var dbdata = db.Query uruchamia zapytanie do bazy danych i przechowuje wynik w dbdata
- nowy wykres tworzy nowy obiekt wykresu i ustawia jego szerokość i wysokość
- metoda AddTitle określa tytuł wykresu
- metoda DataBindTable wiąże źródło danych z wykresem
- metoda Write() wyświetla wykres
Alternatywą dla metody DataBindTable jest użycie AddSeries (patrz poprzedni przykład). DataBindTable jest łatwiejszy w użyciu, ale AddSeries jest bardziej elastyczny, ponieważ możesz określić wykres i dane w bardziej wyraźny sposób:
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("Product Sales")
.AddSeries(chartType:"Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
}
Wykres z danych XML
Trzecią opcją do tworzenia wykresów jest użycie pliku XML jako danych do 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("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}
Odniesienie do obiektu wykresu
| 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. |