Use of charts in the MVC Framework (1)

Because Microsoft's MVC framework has been used in recent projects, some experiences have been recorded. let's first talk about the use of charts and decide to use MSChart. MSChart is a free control launched by Microsoft, already integrated in VS2010

 

The following lists the MSChart-related links.

: Http://www.microsoft.com/downloads/details.aspx? FamilyID = 130f7986-bf49-4fe5-9ca8-910ae6ea442c & DisplayLang = en

For VS 2008 toolbox support

Http://www.microsoft.com/downloads/en/confirmation.aspx? FamilyId = 1d69ce13-e1e5-4315-825c-f14d33a303e9 & displayLang = en

Development Instance

Http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx? ReleaseId = 1591

Document

Http://www.microsoft.com/downloads/details.aspx? FamilyId = EE8F6F35-B087-4324-9DBA-6DD5E844FD9F & displaylang = en

 

After the download, install MSChart first, and then install MSChart_VisualStudioAddOn. Then we can see this MSChart in the VS2008 Toolbox (the development instance is actually a illustrated document, very good, A large amount of code is available)

 

Before using MSChart, describe several concepts:

1. Coordinate System

The ChartControl coordinate system is a relative coordinate system. Using the relative coordinate system, you can adjust the chart control's size by hour and always have a reference object, the starting point of the coordinate system is in the upper left corner (if it is a 3D image, the Z axis is extended)

2. Chart and Image

The coordinate value can be measured by the width and height of the image.

 

The following describes how to use the MSChart control in MVC. Because the MVC Framework does not advocate the use of server controls, we will not use the MSChart control in code behind mode, at this time, we will write the code to the ASPX page, taking the Pie diagram and the Area diagram as examples. The following shows the Pie diagram code on the ASPX page. The Area diagram is similar.

 

Code

System. Web. UI. DataVisualization. Charting. Chart Chart1 = new System. Web. UI. DataVisualization. Charting. Chart ();
Chart1.Width = 412;
Chart1.Height = 296;
Chart1.RenderType = RenderType. ImageTag;

// Populate series data
Double [] yValues = {60, 75, 60, 35,100 };
String [] xValues = {"", ""};

Series defaultSeries = new Series ();

DefaultSeries. Name = "Default ";

Chart1.Series. Add (defaultSeries );

Chart1.Series ["Default"]. Points. DataBindXY (xValues, yValues );

// Set Doughnut chart type
Chart1.Series ["Default"]. ChartType = SeriesChartType. Pie;

// Set labels style
// Chart1.Series ["Default"] ["PieLabelStyle"] = "Disabled ";

// Set Doughnut radius percentage
Chart1.Series ["Default"] ["DoughnutRadius"] = "30 ";

// Explode data point with label "Italy"
// Chart1.Series ["Default"]. Points [4] ["Exploded"] = "true ";

// Enable 3D
ChartArea charArea = new ChartArea ();

CharArea. Name = "ChartArea1 ";
Chart1.ChartAreas. Add (charArea );
Chart1.ChartAreas ["ChartArea1"]. Area3DStyle. Enable3D = true;
Chart1.ChartAreas ["ChartArea1"]. Area3DStyle. Inclination = 45;

Legend legend = new Legend ();
Chart1.Legends. Add (legend );

// Render chart control
Chart1.Page = this. Parent. Page;
HtmlTextWriter writer = new HtmlTextWriter (this. Parent. Page. Response. Output );
Chart1.RenderControl (writer );

 

This code can also be written to the ascx page, but there is a code to modify.

Chart1.Page = this. Page; change it to Chart1.Page = this. Parent. Page;

This method is used in the MVC Framework. If you are interested, you can write an htmlhelper extension method. This is how MSCode is used in the MVC framework, next we will focus on the various attributes of this control.

Take my favorite bookstore database as an example, but the data is hard coding. This chart shows the sales of several types of books:

　　

 

　　

The width, height, and rendertype attributes of the Chart object are not mentioned. You can see what the Chart is.

The Series object is the subject of the Chart object. It is used to set the Chart data and display type.

Let's talk about its attributes.

Point: stores chart data.

ChartType: Chart Style

DoughnutRadius: Rotation Angle

 

Next let's take a look at the relevant results

　　

　　

Add the following attributes:

Chart1.Series ["Default"]. Points [4] ["Exploded"] = "true ";

　　

　　

　　

 

Add the following code:

　　

Code

For (int I = 0; I <Chart1.Series ["Default"]. Points. Count; I ++)
{
Chart1.Series ["Default"]. Points [I]. Label = yValues [I]. ToString ();
Chart1.Series ["Default"]. Points [I]. LegendText = xValues [I];
}

 

　　

The ChartArea object mainly sets the Chart display attributes and groups Series objects.

The Legend object is the name of the data item column on the right.

After talking about this, it is almost enough for our usual applications. Next, let's talk about the Area chart settings.