ASP.NET Web Pages - Chart Helper

Chart - en av de många användbara ASP.NET Web Helper.

Chart Helper

I föregående kapitel lärde du dig hur du använder en ASP.NET "helper".

Du har lärt dig hur du visar data i ett grid genom att använda "WebGrid Helper".

Detta kapitel förklarar hur du visar data i diagram genom att använda "Chart Helper".

"Chart Helper" kan skapa olika typer av diagrambilder genom flera format och taggar. Det kan skapa standarddiagram som areadiagram, stapeldiagram, kolumn diagram, linjediagram och cirkeldiagram, samt mer professionella diagram (t.ex. aktiekursdiagram).

Data som visas i diagrammet kan komma från en array, databas eller fil.

Diagram från array

Följande exempel visar kod som använder data från en array för att visa diagrammet:

Exempel

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

Kör exempel

new Chart Skapa en ny diagramobjekt och ställ in dess bredd och höjd.

AddTitle metoden specificerar diagrammets titel.

AddSeries Metoden lägger till data till diagrammet.

chartType Parametern definierar diagramtypen.

xValue Parametern definierar x-axelns värden.

yValues Parametern definierar y-axelns värden.

Write() metoden visar diagrammet.

Diagram från databas

Du kan först köra en databasfråga och sedan använda data från resultatet för att skapa ett diagram:

Exempel

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

Kör exempel

var db = Database.Open Öppna databasen (och tilldela databasobjektet till variabeln db).

var dbdata = db.Query Kör en databasfråga och spara resultaten i dbdata.

new Chart Skapa en ny diagramobjekt och ställ in dess bredd och höjd.

AddTitle metoden specificerar diagrammets titel.

DataBindTable metoden binder datakällan till diagrammet.

Write() metoden visar diagrammet.

Ersättning för användning av DataBindTable-metoden är att använda AddSeries (se föregående exempel). DataBindTable är lättare att använda, men AddSeries har bättre skalbarhet eftersom den kan specificera diagram och data mer exakt:

Exempel

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

Kör exempel

Diagram från XML-data

Den tredje alternativet för att skapa en diagram är att använda en XML-fil som diagramdata:

Exempel

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

Kör exempel