Shulou(Shulou.com)06/02 Report--

This article introduces how to understand Chart in ASP.NET MVC 3 Beta. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.

The editor will introduce the use of Chart. It includes three aspects: the configuration of Chart data source, the display of Chart and the preservation of Chart. Chart is used in many systems, so it is necessary to introduce it in the first experience of ASP.NET MVC 3 Beta.

1. Configure the data source of Chart

There are probably three ways to configure a data source for Chart.

First: use an array example: Controller code:

Public ActionResult BasicChart () {return View ();}

BasicChart.cshtml Code:

@ {var key = new Chart (width: 600,400) .AddTitle ("mobility") .AddSeries (name: "Employee", xValue: new [] {"January", "February", "April", "May", "June", "July", "August", "September"}, yValues: new [] {"2") "6", "4", "5", "3", "4", "9", "2", "5"}. Write () }

As you can see from the above code, I have configured an array for Chart's xValue and a corresponding array for the corresponding yValue.

Running effect:

At this point, we found that the graphic is displayed separately, without the style and master of the site. The following implementation displays this graph on a page.

Define an Action:

Public ActionResult ShowBasicChart () {return View ();}

View code: define an img tag and change the src to the action that generates the image.

Effect: with site style and motherboard:

The second way: database query

Example:

@ {var db = Database.Open ("SmallBakery"); var data = db.Query ("SELECT Month, Number FROM Employee"); var key = new Chart (width: 600,400) .AddTitle ("people flow") .DataBindTable (dataSource: data, xField: "Month") .Write ();}

The third way: XML example:

@ using System.Data; @ {var dataSet = new DataSet (); dataSet.ReadXmlSchema (Server.MapPath ("~ / App_Data/data.xsd")); dataSet.ReadXml (Server.MapPath ("~ / App_Data/data.xml")); var dataView = new DataView (dataSet.Tables [0]) Var key = new Chart (width: 600,400) .AddTitle ("Sales Per Employee") .AddSeries ("Default", chartType: "Pie", xValue: dataView, xField: "Name", yValues: dataView, yFields: "Sales") .write ();}

Since these three ways are similar, understand one of them, the others are similar, do not elaborate, for the sake of simplicity, the following examples are implemented in an array.

2. Display of Chart:

ChartType property: it has a chartType property that defines how it is displayed. For example, if the chartType of the above example is defined as "Pie", it is displayed as a pie chart.

@ {var key = new Chart (width: 600,400) .AddTitle ("mobility") .AddSeries (name: "Employee", chartType: "Pie", xValue: new [] {"January", "February", "March", "April", "May", "June", "July" "August", "September"}, yValues: new [] {"2", "6", "4", "5", "3", "4", "9", "2", "5"}) .Write () }

Effect:

Template attribute: it can define the background template, such as modifying the code to: template: ChartTheme.Green

Code

@ {var key = new Chart (width: 600,400 template: ChartTheme.Green) .AddTitle ("mobility") .AddSeries (name: "Employee", xValue: new [] {"January", "February", "March", "April", "May", "June", "July", "August", "September"} YValues: new [] {"2", "6", "4", "5", "3", "4", "9", "2", "5"}) .write () }

Effect:

3. Chart save

Save the Chart to the cache: look at the following code:

@ {var chartKey = Request ["key"]; if (chartKey! = null) {var cachedChart = Chart.GetFromCache (key: chartKey); if (cachedChart = = null) {cachedChart = new Chart (600,400); cachedChart.AddTitle ("Cached Chart-Cached at" + DateTime.Now) CachedChart.AddSeries (name: "Employee", axisLabel: "Name", xValue: new [] {"January", "February", "March", "April", "May", "June", "July", "August" September, yValues: new [] {"2", "6", "4", "5", "3", "4", "9", "2", "5"}) CachedChart.SaveToCache (key: chartKey,minutesToCache: 2 Magi slidingExpiration: false);} Chart.WriteFromCache (chartKey);}}

Chart.GetFromCache (key: chartKey) caches the Chart according to the key that the Chart,cachedChart.SaveToCache will be taken out of the cache (key: chartKey,minutesToCache: 2 false). Look at the following picture:

When requested again, the data is fetched directly from the cache. Set the cache for two minutes, and this time the cache expires two minutes later.

Save Chart as a picture:

Save the drawing as a picture using the following code:

@ {var filePathName = "_ ChartFiles/chart01.jpg"; if (! File.Exists (Server.MapPath (filePathName) {var chartImage = new Chart (600,400); chartImage.AddTitle ("Chart Title") ChartImage.AddSeries (name: "Employee", axisLabel: "Name", xValue: new [] {"January", "February", "March", "April", "May", "June", "July", "August", "September"}, yValues: new [] {"2", "6", "4", "5" "3", "4", "9", "2", "5"}) ChartImage.Save (path: filePathName);}}

Saved picture:

Save Chart as XML:

@ {Chart chartXml; var filePathName = "_ ChartFiles/XmlChart.xml"; if (File.Exists (Server.MapPath (filePathName) {chartXml = new Chart (width: 600 chartXml height: 400 templatePath: filePathName);} else {chartXml = new Chart (width: 600 camera height: 400); chartXml.AddTitle ("Chart Title-Saved at" + DateTime.Now) ChartXml.AddSeries (name: "Employee", axisLabel: "Name", xValue: new [] {"January", "February", "March", "April", "May", "June", "July", "August", "September"}, yValues: new [] {"2", "6", "4", "5" "3", "4", "9", "2", "5"}) ChartXml.SaveXml (path: filePathName);} chartXml.Write ();}

As we can see from the above code, XML can be converted to Chart through templatePath. You can save Chart as XML through SaveXml. The generated XML is as follows:

Code

On how to understand the Chart in ASP.NET MVC 3 Beta to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.