顯示3D的效果,微軟給了我們兩種解決方案。一種是使用他自帶的樣式,一種是自己配置一個顯示樣式的XML。
第一種使用自帶的樣式:很簡單,在上一篇文章中其實有提到過,我們将模版改成ChartTheme.Vanilla3D。代碼如下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
代碼
<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樣式:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
<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的代碼修改一下:
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIml2ZuUWYxYmZhR2MiNjY3QGMjFGZlNTOzUWZjJGO2YzM1MWMfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.gif)
var key = new Chart(width: 600, height: 400,templatePath: "~/_ChartFiles/OrangeBlue3DTemplate.xml")
通過這種方式,給了程式員很多的擴充空間。