天天看點

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

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

  第一種使用自帶的樣式:很簡單,在上一篇文章中其實有提到過,我們将模版改成ChartTheme.Vanilla3D。代碼如下:

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果
一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

代碼

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

  效果:

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

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

  定義一個XML樣式:

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果
一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

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

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的代碼修改一下:

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果
一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

var key = new Chart(width: 600, height: 400,templatePath: "~/_ChartFiles/OrangeBlue3DTemplate.xml")

一起談.NET技術,ASP.NET MVC 3 Beta初體驗之超酷的Chart:3D效果

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