用微软Chart制作图表

------------------------------------本篇版权为WillPan个人所有，转载请注明出处---------------------------------------------------------------------

ASP.Net提供利用DataVisualization.dll动态类库创建各种风格的制图表方法。首先先介绍下本例子所用到的数据表以及项目结构等。

项目结构：

 

数据库表结构：

 

 

源码下载地址：http://www.cnblogs.com/willpan/admin/Files.aspx

先看下运行后效果：

按天统计：

按周统计：

源代码讲解：

<asp:chart id="Chart1" runat="server" Height="350px" Width="750px" ImageType="Png" BorderDashStyle="Solid" BackGradientStyle="TopBottom" BackSecondaryColor="White" Palette="BrightPastel" BorderColor="26, 59, 105" BackColor="#D3DFF0" BorderWidth="2">
2 <legends>
3 <asp:legend LegendStyle="Row" IsTextAutoFit="False" DockedToChartArea="ChartArea1" Docking="Left" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold" TitleFont="Microsoft Sans Serif, 8pt, style=Bold"></asp:legend>
4 </legends>
5 <borderskin skinstyle="Emboss"></borderskin>
6 <Series>
7 <asp:Series Name="Series1" backgradientstyle="VerticalCenter" IsValueShownAsLabel="False" ChartArea="ChartArea1" CustomProperties="LabelStyle=Bottom" BorderColor="180, 26, 59, 105" LabelFormat="#" ChartType="Column">
8 </asp:Series>
9 </Series>
10 <chartareas>
11 <asp:chartarea Name="ChartArea1" BorderColor="64, 64, 64, 64" BackSecondaryColor="White" BackColor="OldLace" ShadowColor="Transparent" BackGradientStyle="TopBottom">
12 
13 <area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>
14 <axisy linecolor="64, 64, 64, 64" IsLabelAutoFit="false" ArrowStyle="Triangle">
15 <labelstyle font="Trebuchet MS, 8.25pt, style=Bold"/>
16 <majorgrid linecolor="64, 64, 64, 64"/>
17 </axisy>
18 <axisx linecolor="64, 64, 64, 64" IsLabelAutoFit="false" ArrowStyle="Triangle" Title="时间" Interval="1">
19 <labelstyle font="Trebuchet MS, 8.25pt, style=Bold"/>
20 <majorgrid linecolor="64, 64, 64, 64"/>
21 </axisx>
22 </asp:chartarea>
23 </chartareas>
24 </asp:chart>

大家可以看到<asp:chart></asp:chart>标签，这个标签是根标签(制图表标签)。

其中<legends>、<borderskin>、<Series>、<chartareas>等都包含其中。

<legends>定义图表的说明内容，

<borderskin>定义图表的皮肤，是个枚举值。通过属性skinstyle="Emboss"控制。

<Series>用来绑定数据。其中属性ChartType="Column"表示图表为柱状图，也是枚举类型。属性ChartArea="ChartArea1"表示图表显示区域

在后台可以这样绑定数据：Chart1.Series["Series1"].Points.AddXY(row["x"], row["y"].ToString());以横坐标和竖坐标确定点。

<chartareas>定义图表显示区域。可以在标签一面添加多个<asp:chartarea></asp:chartarea>。

在<asp:chartarea>标签里可以定义横纵坐标。如再添加纵坐标<axisy></axisy>、横坐标<axisx></axisx>

属性linecolor表示横纵坐标的颜色，ArrowStyle表示箭头样式，Title表示横纵坐标标题，Interval表示间隔，默认为0

以上所有标签和属性可以在System.Web.DataVisualization.xml文件里找到相应的解释。

----------------------------------------------------------共享交流 旨在进步-----------------------------------------------------------------------