天天看点

ASP.NET MVC 3 Beta初体验之超酷的Chart:3D效果

   显示3D的效果,微软给了我们两种解决方案。一种是使用他自带的样式,一种是自己配置一个显示样式的XML。

   第一种使用自带的样式:很简单,在上一篇文章中其实有提到过,我们将模版改成ChartTheme.Vanilla3D。代码如下:

<a></a>

代码

&lt;p&gt; 

@{ 

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(); 

}

&lt;/p&gt;

效果:

第二种方式:自定义显示样式。MVC可以让我们自定通过XML自定义Chart的显示样式。

定义一个XML样式:

&lt;Chart Palette="BrightPastel"

BackColor="#D3DFF0"

BackGradientStyle="TopBottom"

BackSecondaryColor="White"

BorderColor="26, 59, 105"

BorderWidth="2"

BorderlineDashStyle="Solid"&gt;

&lt;Series&gt;

&lt;series _Template_="All"

BorderColor="180, 26, 59, 105"

CustomProperties="LabelStyle=Bottom"

IsValueShownAsLabel="True"&gt;

&lt;/series&gt;

&lt;/Series&gt;

&lt;ChartAreas&gt;

&lt;ChartArea _Template_="All"

BackColor="Orange"

ShadowColor="Transparent"

BorderColor="64, 64, 64, 64"

BorderDashStyle="Solid"&gt;

&lt;Area3DStyle Enable3D="True"&gt;

&lt;/Area3DStyle&gt;

&lt;AxisX ArrowStyle="Triangle"

IsLabelAutoFit="False"

LineColor="64, 64, 64, 64"&gt;

&lt;MajorGrid LineColor="64, 64, 64, 64"/&gt;

&lt;LabelStyle Font="Trebuchet MS, 10pt, style=Bold"

IsStaggered="False"/&gt;

&lt;/AxisX&gt;

&lt;/ChartArea&gt;

&lt;/ChartAreas&gt;

&lt;Titles&gt;

&lt;Title _Template_="All"

Font="Trebuchet MS, 14.25pt, style=Bold"

ForeColor="26, 59, 105"

ShadowOffset="3"

ShadowColor="32, 0, 0, 0"&gt;

&lt;/Title&gt;

&lt;/Titles&gt;

&lt;BorderSkin SkinStyle="Emboss"/&gt;

&lt;/Chart&gt;

在创建Chart的代码修改一下:

&lt;p&gt;

@{

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();

通过这种方式,给了程序员很多的扩展空间。

本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/10/23/1858858.html,如需转载请自行联系原作者