ASP. net mvc 3 amazing chart for Beta: 3D effect

In the previous article: ASP. net mvc 3, the amazing chart of the Beta experience introduced the use of the chart, but not the 3D effect. This article will introduce the 3D effect of chart. It is declared that the chart control may not be as powerful as some open-source or non-open-source, paid or non-charged components. I believe this control will become more and more powerful in the future. I don't need to talk much about it. I want to see how to demonstrate the 3D effect of the chart.

Show the effect of 3D, Microsoft gave us two solutions. One is to use his own style, and the other is to configure an XML display style.

First, use the built-in style:As mentioned in the previous article, we changed the template to charttheme. vanilla3d. The Code is as follows:

Code

 <P>
@{
Var key = new chart (width: 600, height: 400, template: charttheme. vanilla3d)
. Addtitle ("personnel turnover ")
. Addseries (name: "employee", xvalue: New [] {"August", "August ", "August", "August "},
Yvalues: New [] {"2", "6", "4", "5", "3", "4", "9", "2 ", "5 "})
. Write ();
}
</P>

Effect:

Method 2: Customize the display style.MVC allows us to customize the display style of charts through XML.

Define an XML style:

Code

 <Chart Palette="BrightPastel"
BackColor="#D3DFF0"
BackGradientStyle="TopBottom"
BackSecondaryColor="White"
BorderColor="26, 59, 105"
BorderWidth="2"
BorderlineDashStyle="Solid">
<Series>
<series _Template_="All"
       BorderColor="180, 26, 59, 105"
       CustomProperties="LabelStyle=Bottom"
       IsValueShownAsLabel="True">
</series>
</Series>
<ChartAreas>
<ChartArea _Template_="All"
       BackColor="Orange"
       BackGradientStyle="TopBottom"
       BackSecondaryColor="White"
       ShadowColor="Transparent"
       BorderColor="64, 64, 64, 64"
       BorderDashStyle="Solid">
<Area3DStyle Enable3D="True" >
</Area3DStyle>
<AxisX ArrowStyle="Triangle"
           IsLabelAutoFit="False"
            LineColor="64, 64, 64, 64">
<MajorGrid LineColor="64, 64, 64, 64" />
<LabelStyle Font="Trebuchet MS, 10pt, style=Bold"
               IsStaggered="False" />
</AxisX>
</ChartArea>
</ChartAreas>
<Titles>
<Title _Template_="All"
       Font="Trebuchet MS, 14.25pt, style=Bold"
       ForeColor="26, 59, 105"
       ShadowOffset="3"
       ShadowColor="32, 0, 0, 0">
</Title>
</Titles>
<BorderSkin SkinStyle="Emboss" />
</Chart>

Modify the code for creating a chart:

Code

 <P>
@{
Var key = new chart (width: 600, height: 400, templatepath :"~ /_ Chartfiles/orangeblue3dtemplate. xml ")
. Addtitle ("personnel turnover ")
. Addseries (name: "employee", xvalue: New [] {"August", "August ", "August", "August "},
Yvalues: New [] {"2", "6", "4", "5", "3", "4", "9", "2 ", "5 "})
. Write ();
}
</P>

Effect:

In this way, it gives programmers a lot of extended space.

Summary:This article is a supplement to the cool chart of ASP. net mvc 3 beta. Describes the 3D chart effect in ASP. net mvc 3 beta.