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

是藍色的背景，看著比較舒服。

上面那兩篇文章裡已經說了幾種綁定資料的方式，綁定DataSet等類型的時候比較簡單，和綁定下拉式清單方塊的方式類似，設定X值欄位Y值欄位即可。

因為我是要做統計圖表，每個部門或責任人的指標是現成的，但完成量是計算出來的，因此用了動態添加的方法，在綁定GridView的時候，每綁定一行資料，就添加一個Point

 

統計資料：在這裡設定Chart的一些屬性，如Label Tilte等等，Label就是顯示在資料條的資訊，一般預設用"#VAL"，就是預設的Y值

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

 在綁定每行資料的時候添加Point

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

嗯，這就行了。上面那些綁定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目錄分配許可權