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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.