ASP.NET MVC 3 Beta初體驗之超酷的Chart：3D效果

    在前一篇文章：ASP.NET MVC 3 Beta初體驗之超酷的Chart中介紹了Chart的使用，但是沒有介紹到3D效果。這篇文章將介紹一下Chart的3D效果的展示。聲明一點的是：這個Chart控制項可能沒有一些開源或者不開源，收費或者不收費的組件那般強大，我相信未來這個控制項會越來越強大的。廢話不多說了，看下如何展示Chart的3D效果。

   顯示3D的效果，微軟給了我們兩種解決方案。一種是使用他內建的樣式，一種是自己配置一個顯示樣式的XML。

   第一種使用內建的樣式：很簡單，在上一篇文章中其實有提到過，我們將模版改成ChartTheme.Vanilla3D。代碼如下：

代碼

<p>    
@{    
var key = new Chart(width: 600, height: 400,template: ChartTheme.Vanilla3D)    
.AddTitle("人員流動情況")    
.AddSeries(name: "Employee",xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"}, 
yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})    
.Write();    
}
</p>

效果：

第二種方式:自訂顯示樣式。MVC可以讓我們自定通過XML自訂Chart的顯示樣式。

定義一個XML樣式：

代碼

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

在建立Chart的代碼修改一下：

代碼

<p>
    @{
    var key = new Chart(width: 600, height: 400,templatePath: "~/_ChartFiles/OrangeBlue3DTemplate.xml")
    .AddTitle("人員流動情況")
    .AddSeries(name: "Employee",xValue: new[] {  "一月份", "二月份", "三月份", "四月份", "五月份", "六月份", "七月份", "八月份", "九月份"},
    yValues: new[] { "2", "6", "4", "5", "3","4","9","2","5"})
    .Write();
    }
</p>

效果：

通過這種方式，給了程式員很多的擴充空間。

總結：本文是對ASP.NET MVC 3 Beta初體驗之超酷的Chart的一個補足。介紹了在ASP.NET MVC 3 Beta中Chart的3D效果。