Webové stránky ASP.NET – Pomocník pro grafy
The Chart Helper – jeden z mnoha užitečných webových pomocníků ASP.NET.
Pomocník grafu
V předchozích kapitolách jste se naučili používat ASP.NET "Helper".
Naučili jste se, jak zobrazit data v mřížce pomocí "pomocníka WebGrid".
Tato kapitola vysvětluje, jak zobrazit data v grafické podobě pomocí "Pomocníka pro grafy".
"Pomocník pro grafy" může vytvářet obrázky různých typů grafů s mnoha možnostmi formátování a štítky. Může vytvářet standardní grafy, jako jsou plošné grafy, sloupcové grafy, sloupcové grafy, spojnicové grafy a koláčové grafy, spolu s více specializovanými grafy, jako jsou akciové grafy.
Data, která zobrazíte v grafu, mohou pocházet z pole, z databáze nebo z dat v souboru.
Graf z pole
Níže uvedený příklad ukazuje kód potřebný k zobrazení grafu z pole hodnot:
Příklad
@{
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 vytvoří nový objekt grafu a nastaví jeho šířku a výšku
- metoda AddTitle určuje název grafu
- metoda AddSeries přidává data do grafu
- parametr chartType definuje typ grafu
- parametr xValue definuje názvy os x
- parametr yValues definuje hodnoty osy y
- metoda Write() zobrazí graf
Graf z databázových dat
Můžete spustit databázový dotaz a poté použít data z výsledků k vytvoření grafu:
Příklad
@{
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 otevře databázi (a přiřadí objekt databáze k proměnné db)
- var dbdata = db.Query spustí databázový dotaz a uloží výsledek do dbdata
- new Chart vytvoří nový objekt grafu a nastaví jeho šířku a výšku
- metoda AddTitle určuje název grafu
- metoda DataBindTable sváže zdroj dat s grafem
- metoda Write() zobrazí graf
Alternativou k použití metody DataBindTable je použití AddSeries (viz předchozí příklad). DataBindTable se používá snadněji, ale AddSeries je flexibilnější, protože můžete určit graf a data explicitněji:
Příklad
@{
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();
}
Graf z dat XML
Třetí možností pro vytváření grafů je použití souboru XML jako dat pro graf:
Příklad
@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();}
}
Odkaz na objekt grafu
| 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. |