ASP.NET中制作各种3D图表的方法
前言
大家都知道通过图表控件,我们即能表示数据又能比较各种图表的数据,例如比较去年和今年的收入。图表的类型也有很多,如柱状图、折线图、条形图、组合图等等。
首先,我将展示如何绘制出一个简单的图表。
简单图表的步骤
步骤1
新建一个”asp.net empty web site”。
步骤2
在solution explorer 中添加新项目,添加new form。
步骤3
工具栏—标准—项目。我们会看到在.net framework component.中有两个图表选项,打勾并保存。.net framework 4.0 及以上版本将chart控件集成到了工具箱toolbox里面,3.5及早期版本中则需要此步骤。
步骤4
进入工具栏—数据—图表,从工具栏中拖到页面。
步骤5
将chart控件拖到页面以后,ide会自动在web.config 文件中添加以下4个标签,同时在default.aspx 的designer页面也能看到一个普通图表。
<appsettings> <add key="chartimagehandler" value="storage=file;timeout=20;dir=c:\tempimagefiles\;" /> </appsettings>
<httphandlers> <add path="chartimg.axd" verb="get,head,post" type="system.web.ui.datavisualization.charting.charthttphandler, system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" validate="false" /> </httphandlers>
<controls> <add tagprefix="asp" namespace="system.web.ui.datavisualization.charting" assembly="system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" /> </controls>
<assemblies> <add assembly="system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35"/> </assemblies>
步骤6
右击图表,进入属性。属性窗口选择并添加数据源。当然我们也可以用代码将数据绑定到图表的方式,下文的3d图表的代码我就采用了绑定方法。
步骤7
成功添加数据源之后,返回属性窗口,点击系列,我们会看到这样的一个窗口。
步骤8
在系列的数据源中设置x轴和y的对应项,这里我将x轴的对应项的值设置为姓名, y轴的对应项的值设置为年龄。如果想要在图表中分别为x和y轴命名,那么返回属性窗口,点击图表区,你就会看到一个axes的属性。
步骤9
运行程序,输出结果如下图。
图表的类型
如果你想要各种类型的图表,这很简单,右击图表—显示智能标签,就能选取各种图表类型了。
3d 图表
与其他图表相比,3d图表的优势在于看起来更清晰、更直观。现在我们就来讨论如何制作3d图表。
首先新建一个网站,将图表拖到aspx页面。如我上述所说,代码会自动添加到web.config文件中。然后只有在aspx页面中有一个图表区标签。我们把3d改为true。我们也可以使用向导,右击图表—属性—图表区属性,然后在3d图表设置中将3d改为true,默认情况下就会是false。
代码:
<%@ page language="c#" autoeventwireup="true" codefile="examchart.aspx.cs" inherits="examchart" %> <%@ register assembly="system.web.datavisualization, version=4.0.0.0, culture=neutral, publickeytoken=31bf3856ad364e35" namespace="system.web.ui.datavisualization.charting" tagprefix="asp" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:chart id="scorechart" width="600px" height="320px" runat="server" backcolor="silver" backgradientstyle="leftright" borderlinewidth="2" tabindex="2" onload="scorechart_load"> <series> <asp:series name="runseries" chartarea="chartarea1"> </asp:series> </series> <chartareas> <asp:chartarea name="chartarea1"> <axisy title="得分"> </axisy> <axisx title="姓名"> </axisx> <area3dstyle enable3d="true" wallwidth="10"></area3dstyle> </asp:chartarea> </chartareas> <titles> <asp:title name="title1" text="得分情况"> </asp:title> </titles> </asp:chart> </div> </form> </body> </html>
然后新建一个类:
public class run { public string name { get; set; } public int point { get; set; } }
创建数据源,将数据源绑定到图表中,绑定方法的代码如下:
using system; using system.collections.generic; using system.web.ui; using system.web.ui.datavisualization.charting; public partial class examchart : system.web.ui.page { protected void page_load(object sender, eventargs e) { if (!page.ispostback) { binddata(); } } private void binddata() { var runs = new list<run>() { new run() { name = "王利", point = 200}, new run() { name = "张明", point = 32 }, new run() { name = "孙超", point = 78 }, new run() { name = "李飞", point = 50 }, new run() { name = "赵越", point = 32 }, new run() { name = "王洪", point = 155}, new run() { name = "宋伟", point = 22 } }; var series = scorechart.series["runseries"]; foreach (var exam in runs) { var point = new datapoint(); point.setvaluexy(exam.name, exam.point); point.label = exam.point.tostring(); series.points.add(point); } scorechart.datasource = runs; scorechart.databind(); } protected void scorechart_load(object sender, eventargs e) { } }
运行程序,效果图:
我们知道,生效3d后我们就可以创建一个3d图表,它是一个布尔类型可能是为true也可能是为false,默认情况下通常为false。此外,在asp.net中,3d图表的角度也可以调整,介于90度到-90度之间。-90度会使图表会完全处于置底,90度则会完全置顶。有一个属性被称为“is clustered”属性是一个布尔值,即使使用具有相同类型和性质的多个图表,它也能展现良好的视图效果。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。
上一篇: .NET微信公众号客服接口