ASP.NET Web Pages - Chart Helper

Chart - én af mange nyttige ASP.NET Web helpers.

Chart Helper

I det foregående kapitel lærte du, hvordan man bruger en ASP.NET "helper".

Du har lært, hvordan man viser data i en grid ved hjælp af "WebGrid Helper".

Dette kapitel forklarer, hvordan man viser data i diagrammer ved hjælp af "Chart Helper".

"Chart Helper" kan oprette forskellige typer diagrambilleder gennem flere formater og tag. Det kan oprette standarddiagrammer, såsom arealdiagrammer, søjlediagrammer, kolonner, linjer og cirkeldiagrammer, samt mere professionelle diagrammer (f.eks. aktiekursdiagrammer).

Data, der vises i diagrammet, kan være data fra en array, database eller fil.

Diagram fra array

Følgende eksempel viser kode, der bruger data fra en array til at vise et diagram:

Eksempel

@{ 
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 eksempel

new Chart Opret et nyt diagramobjekt og indstil dens bredde og højde.

AddTitle metoden specificerer diagrammets titel.

AddSeries metoden tilføjer data til diagrammet.

chartType Parameter definerer diagrammets type.

xValue Parameter definerer x-aksens værdier.

yValues Parameter definerer y-aksens værdier.

Write() metoden viser diagrammet.

Diagram fra database

Du kan først køre en databasekørsel og derefter bruge dataene fra resultaterne til at oprette et diagram:

Eksempel

@{ 
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 eksempel

var db = Database.Open Åbn database (og tildel databaseobjektet til variablen db).

var dbdata = db.Query Kør en databasekørsel og gem resultaterne i dbdata.

new Chart Opret et nyt diagramobjekt og indstil dens bredde og højde.

AddTitle metoden specificerer diagrammets titel.

DataBindTable metoden binder datakilden til diagrammet.

Write() metoden viser diagrammet.

Erstatning for DataBindTable-metoden er at bruge AddSeries (se tidligere eksempel). DataBindTable er lettere at bruge, men AddSeries har større fleksibilitet, fordi den kan specificere diagrammet og dataene mere præcist:

Eksempel

@{ 
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 eksempel

Diagrammer fra XML-data

Den tredje mulighed for at generere et diagram er at bruge en XML-fil som data til diagrammet:

Eksempel

@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 eksempel