2013年8月19日 星期一

Microsoft Chart Controls 放上 Server 無法顯示圖表

最近在測 Microsoft Chart Controls
在本機測都很正常
一放上 Web Server, 圖表就無法顯示出來

這邊記錄一下解決方法:
 1.設定 Chart Control 的 ImageLocation 屬性 (路徑+檔名 [不含副檔名])
 2.修改 Chart Control 的 ImageStorageMode 屬性為 "UseImageLocation"


以圖為例
./TempImages/temp
就是將圖檔暫存在網站下的TempImages資料夾中
暫存的圖檔檔名為temp, 副檔名就看 Microsoft Chart Controls 設定的檔案格式 (.png / .jpg)
副檔名就看 ImageType 屬性的設定

當使用 UseImageLocation 方式後
會在暫存資料夾中保留圖片
如果不想在 Web Server 上保留圖片的話
需要自行撰寫刪除檔案程式段

Microsoft Chart Controls for Microsoft .NET Framework 3.5 範例

最近在測 Microsoft Chart Controls
所以在這邊記錄一下測過的東東

.aspx
<asp:Chart ID="Chart1" runat="server" Height="500px" Width="1000">
</asp:Chart>
.cs
using System.Web.UI.DataVisualization.Charting;

List<string> XLabels = new List<string>();
List<double> YValues = new List<double>();

XLabels.Add("2013/08/01");
XLabels.Add("2013/08/08");
XLabels.Add("2013/08/15");
YValues.Add(21030.0);
YValues.Add(45121.0);
YValues.Add(45481.0);

Chart1.ChartAreas.Add(new ChartArea());
//繪圖區背景顏色
Chart1.ChartAreas[0].BackColor = System.Drawing.Color.LightGreen;  
//圖表名稱
Chart1.Titles.Add("測試圖表");
//X軸說明
Chart1.ChartAreas[0].AxisX.Title = "日期";  
//X軸各數點間區塊隔行變色
Chart1.ChartAreas[0].AxisX.IsInterlaced = true;  
//X軸邊界不留空格
Chart1.ChartAreas[0].AxisX.IsMarginVisible = false;
//X軸刻度(控制X軸最多10個刻度)
Chart1.ChartAreas[0].AxisX.Interval = Math.Ceiling(XLabels.Count / 10.0);
//Y軸說明
Chart1.ChartAreas[0].AxisY.Title = "金額";  
//Y軸刻度  
Chart1.ChartAreas[0].AxisY.Interval = 10000;
//Y軸刻度加上千分位
Chart1.ChartAreas[0].AxisY.LabelStyle.Format = "#,##0";

//增加圖示
Chart1.Legends.Add(new Legend());
//圖示位置(上方)
Chart1.Legends[0].Docking = Docking.Top;
//圖示位置(中間)
Chart1.Legends[0].Alignment = System.Drawing.StringAlignment.Center;  

//數線名稱(會顯示在圖示中)
Chart1.Series.Add("每週變化");
//數線顏色
Chart1.Series[0].Color = System.Drawing.Color.Red;
//數線類型  
Chart1.Series[0].ChartType = SeriesChartType.Line;
//數線寬度
Chart1.Series[0].BorderWidth = 3;  

//數點形狀
Chart1.Series[0].MarkerStyle = MarkerStyle.Circle;
//數點大小
Chart1.Series[0].MarkerSize = 12;  
//數點顏色
Chart1.Series[0].MarkerColor = System.Drawing.Color.Red;
//在數點上顯示Y軸值
Chart1.Series[0].IsValueShownAsLabel = true;

//數點說明文字顏色
Chart1.Series[0].LabelForeColor = System.Drawing.Color.Blue;
//數點說明背景顏色
Chart1.Series[0].LabelBackColor = System.Drawing.Color.Yellow;
//數點說明加上千分位
Chart1.Series[0].LabelFormat = "#,##0";

//繫結XY座標值-方法1
Chart1.Series[0].Points.DataBindXY(XLabels, YValues);

/* 繫結XY座標值-方法2
for (int k = 0; k < XLabels.Count; k++)
{
   DataPoint newDP = new DataPoint(k, YValues[k]);
   newDP.AxisLabel = XLabels[k];
   Chart1.Series[0].Points.Add(newDP);
}
*/