ASP.NET3.5下的MSChart图表控件使用

最近在做一个指标管理，有一个统计指标完成量的功能，偶然间发现了MSChart控件，下载下来试了试，发现很好用，可以做出非常漂亮的图表。可以设置的选项非常多，自带的Samples有很多漂亮的样式。赶紧用上了。

ps：说是把Dundas 买下来了。微软就是财大气粗。

下载地址：http://www.microsoft.com/downloads/details.aspx?displaylang=zh-cn&FamilyID=130f7986-bf49-4fe5-9ca8-910ae6ea442c

语言包：http://www.microsoft.com/downloads/details.aspx?familyid=581FF4E3-749F-4454-A5E3-DE4C463143BD&displaylang=zh-cn

添加到VS2008工具箱的程序Microsoft Chart Controls Add-on for Microsoft Visual Studio 2008：http://www.microsoft.com/downloads/details.aspx?FamilyId=1D69CE13-E1E5-4315-825C-F14D33A303E9&displaylang=en

实例站点：http://code.msdn.microsoft.com/mschart

还下过一个Sample，不过忘了在哪里下的了。在上面那个站点上也有下载。

 

两篇很有用的文章 来自 蝈蝈的窝：http://www.cnblogs.com/shuncy/archive/2008/11/07/1328738.html

http://www.cnblogs.com/shuncy/archive/2008/11/10/1330827.html

 

 

咋不能上传图片了捏。

 

基本需要设置的属性有：

1.Annotations --图形注解集合

2.ChartAreas  --图表区域集合

3.Legends      --图例集合

4.Series　　　 --图表序列集合（即图表数据对象集合）

5.Titles　　　　--图标的标题集合

 

因为Sample里自带了很多漂亮的样式，我就直接拿过来用了，修改数据绑定的部分即可。我选了下面这个：

 

<asp:Chart ID="Chart1" runat="server" BackColor="#D3DFF0" backgradientendcolor="White" backgradienttype="TopBottom" BorderlineColor="26, 59, 105" borderlinestyle="Solid" BorderlineWidth="2" Height="300px" ImageType="Png" ImageUrl="~/TempImages/ChartPic_#SEQ(300,3)" Palette="BrightPastel" Width="600px"> <Titles> <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style="Bold" mce_style="Bold"" ForeColor="26, 59, 105"> </asp:Title> </Titles> <Legends> <asp:Legend Name="Legend1" Docking="Top"> </asp:Legend> </Legends> <BorderSkin SkinStyle="Emboss" /> <Series> <asp:Series ChartArea="Default" Legend="Legend1" Name="本月指标"> </asp:Series> <asp:Series ChartArea="Default" Legend="Legend1" Name="完成量"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea BackColor="64, 165, 191, 228" BackGradientStyle="TopBottom" BackSecondaryColor="White" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" Name="Default" ShadowColor="Transparent"> <AxisY IsLabelAutoFit="False" LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style="Bold" mce_style="Bold"" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisY> <AxisX IsLabelAutoFit="False" LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style="Bold" mce_style="Bold"" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart>

是蓝色的背景，看着比较舒服。

上面那两篇文章里已经说了几种绑定数据的方式，绑定DataSet等类型的时候比较简单，和绑定下拉列表框的方式类似，设置X值字段Y值字段即可。

因为我是要做统计图表，每个部门或责任人的指标是现成的，但完成量是计算出来的，因此用了动态添加的方法，在绑定GridView的时候，每绑定一行数据，就添加一个Point

 

统计数据：在这里设置Chart的一些属性，如Label Tilte等等，Label就是显示在数据条的信息，一般默认用"#VAL"，就是默认的Y值

/// <summary> /// Handles the Click event of the btnSearch2 control.按部门统计每月份 /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param> protected void btnSearch2_Click(object sender, EventArgs e) { //设置是否生成图表 if (this.chkChart2.Checked == true) { //this.Chart1.Series[0].Name = "本月指标"; //this.Chart1.Series[1].Name = "完成量"; this.Chart2.Series[0].Label = "#VAL"; this.Chart2.Series[1].Label = "#VAL"; this.Chart2.Titles[0].Text = this.ddlDepartmentID2.SelectedItem.Text + this.txtSearchIndicatorDate2Start.Text + "-" + this.txtSearchIndicatorDate2End.Text + this.ddlSearchSaleTypeID2.SelectedItem.Text + "销售指标完成情况统计"; } this.lblStrWhere2.Text = "DepartmentID=" + this.ddlDepartmentID2.SelectedValue + " and SaleTypeID=" + this.ddlSearchSaleTypeID2.SelectedValue + " and IndicatorDate>='" + this.txtSearchIndicatorDate2Start.Text + "' and IndicatorDate<='" + this.txtSearchIndicatorDate2End.Text + "'"; ChinaMobile.BLL.Sales.DepartmentIndicators bll = new ChinaMobile.BLL.Sales.DepartmentIndicators(); DataSet ds = bll.GetList(this.lblStrWhere2.Text); this.myGridView2.DataSource = ds; this.myGridView2.DataBind(); }

 在绑定每行数据的时候添加Point

/// <summary> /// Handles the RowDataBound event of the myGridView2 control. /// </summary> /// <param name="sender">The source of the event.</param> /// <param name="e">The <see cref="System.Web.UI.WebControls.GridViewRowEventArgs"/> instance containing the event data.</param> protected void myGridView2_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { //显示部门 Label lblDepartment = (Label)(e.Row.FindControl("lblDepartment")); lblDepartment.Text = this.ddlDepartmentID2.SelectedItem.Text; //显示销售类型 Label lblSaleTypeInfo = (Label)(e.Row.FindControl("lblSaleTypeInfo")); lblSaleTypeInfo.Text = this.ddlSearchSaleTypeID2.SelectedItem.Text; //显示指标 //Label lblIndicator = (Label)(e.Row.FindControl("lblIndicator")); ChinaMobile.BLL.Sales.DepartmentIndicators bll = new ChinaMobile.BLL.Sales.DepartmentIndicators(); int DepartmentID = int.Parse(this.myGridView2.DataKeys[e.Row.RowIndex].Values["DepartmentID"].ToString()); string IndicatorDate = this.myGridView2.DataKeys[e.Row.RowIndex].Values["IndicatorDate"].ToString(); //int indicator = bll.GetIndicator(DepartmentID, int.Parse(this.ddlSearchSaleTypeID2.SelectedValue), IndicatorDate); int indicator = int.Parse(this.myGridView2.DataKeys[e.Row.RowIndex].Values["Indicator"].ToString()); //显示已完成指标 Label lblIndicatorYes = (Label)(e.Row.FindControl("lblIndicatorYes")); Label lblIndicatorNo = (Label)(e.Row.FindControl("lblIndicatorNo")); Label lblPercent = (Label)(e.Row.FindControl("lblPercent")); if (indicator > 0) { //lblIndicator.Text = indicator.ToString(); ChinaMobile.BLL.Sales.SaleRecord bllSR = new ChinaMobile.BLL.Sales.SaleRecord(); lblIndicatorYes.Text = bllSR.GetIndicatorYes(DepartmentID, int.Parse(this.ddlSearchSaleTypeID2.SelectedValue), IndicatorDate).ToString(); lblIndicatorNo.Text = bllSR.GetIndicatorNo(DepartmentID, int.Parse(this.ddlSearchSaleTypeID2.SelectedValue), IndicatorDate).ToString(); System.Globalization.NumberFormatInfo GN = new System.Globalization.CultureInfo("zh-CN", false).NumberFormat; GN.PercentDecimalDigits = 2;////保留二位小数 lblPercent.Text = ((decimal.Parse(lblIndicatorYes.Text) / indicator)).ToString("P", GN); } else { //lblIndicator.Text = "本月未分配"; ChinaMobile.BLL.Sales.SaleRecord bllSR = new ChinaMobile.BLL.Sales.SaleRecord(); lblIndicatorYes.Text = bllSR.GetIndicatorYes(DepartmentID, int.Parse(this.ddlSearchSaleTypeID2.SelectedValue), IndicatorDate).ToString(); lblIndicatorNo.Text = bllSR.GetIndicatorNo(DepartmentID, int.Parse(this.ddlSearchSaleTypeID2.SelectedValue), IndicatorDate).ToString(); } //设置图表 if (this.chkChart2.Checked == true) { this.Chart2.Series[0].Points.AddXY(this.myGridView2.DataKeys[e.Row.RowIndex]["IndicatorDate"].ToString(), indicator); this.Chart2.Series[1].Points.AddXY(this.myGridView2.DataKeys[e.Row.RowIndex]["IndicatorDate"].ToString(), double.Parse(lblIndicatorYes.Text)); } } }

嗯，这就行了。上面那些绑定GridView的都是废话，其实就最后两三行是添加Point的。这只是生成了一个很简单的图表，还可以设置每个数据行的点击事件，显示更详细的信息。

 咋不能上传图片。

 

 

在发布的时候注意，有可能会出现错误提示：

图表处理程序配置 [c:/TempImageFiles/] 中的临时目录无效。

这是因为在webconfig里设置了图片生成的路径，修改webconfig文件

把<add key="ChartImageHandler" value="storage=file;timeout=20;dir=c:/TempImages/;" />

红色部分修改为 <add key="ChartImageHandler" value="storage=file;timeout=20;url=~/TempImages/;" />

默认的是绝对路径，改成相对路径就好了

同时要给相应的TempImages目录分配权限