c# mschart 學習

一、本文描述

mschart繪製資料柱狀圖/折線圖

1、根據時間，以及時間點的資料進行綁定，並顯示為柱狀圖，折線圖
2、可動態(無需在頁面添加asp.Chart控制項)繪製1中的兩種圖表，顯示在頁面上
3、滑鼠在座標點上懸停時，可顯示當前座標點的時間值，資料值
4、按一下滑鼠時，可擷取當前點擊座標點的橫縱座標的資料值,並通過指令碼轉向新頁面
5、關於座標軸綁定時間點，存在時間點不連續的情況，盡量不要使用DataSource進行資料繫結；
使用Points.AddXY()進行綁定後，不會出現時間點不連續而出現空白，使相鄰的兩條柱狀條相隔較遠

 二、

  1、折線圖

   2、柱狀圖

 

三、代碼建立ms chart

View Code

/// <summary>
/// 設定Chart基本資料
/// </summary>
/// <param name="chartName"></param>
/// <returns></returns>
    Chart ChartSetting(string chartName)
    {
        Chart newChart = new Chart();

#region chart properies
        newChart.Width = Unit.Pixel(990);
        newChart.Height = Unit.Pixel(160);
        newChart.BackColor = Color.White;// Color.FromArgb(211, 223, 240);
        newChart.ID = chartName;
        newChart.CssClass = "chartInfo";
        newChart.Palette = ChartColorPalette.BrightPastel;
//newChart.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
        #endregion

#region ChartArea
        ChartArea chartArea=new ChartArea("ChartArea1");
        chartArea.BorderDashStyle = ChartDashStyle.Solid;
        chartArea.BackColor = Color.WhiteSmoke;// Color.FromArgb(0, 0, 0, 0);       
        chartArea.ShadowColor = Color.FromArgb(0, 0, 0, 0);
        chartArea.AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Dash;//設定網格為虛線
        chartArea.AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Dash;
        newChart.ChartAreas.Add(chartArea);
#endregion

#region Series
        Series serDValue = new Series("SerDValue");
        serDValue.ChartArea = "ChartArea1";
        serDValue.YValueType = ChartValueType.Double;
        serDValue.LabelFormat = "0.ms";
        serDValue.XValueType = ChartValueType.Auto;
        serDValue.ShadowColor = Color.Black;
        serDValue.CustomProperties = "DrawingStyle=Emboss";

        newChart.Series.Add(serDValue);
#endregion

#region 添加單擊事件
        newChart.Click+=new ImageMapEventHandler(NewChart_Click);
        newChart.Attributes["onclick"] = ClientScript.GetPostBackEventReference(newChart, "@").Replace("'@'", "'chart:'+_getCoord(event)");
        newChart.Style[HtmlTextWriterStyle.Position] = "relative";       
#endregion

return newChart;
    }

 四、將資料填充到ms chart

View Code

public void DrawChart()
    {
#region 根據緩衝擷取相關資料
object cacheCodeData = DataCache.GetCache(Guid.Next());
if (cacheCodeData != null)
       {
           dtData = cacheCodeData as DataTable;
       }
else
       {
           dtData =GetDataTableInfo();//擷取資料
//重新寫入緩衝
           if (dtData != null)
           {
               DataCache.SetCache(Guid.Next());
           }
       }
#endregion

        Series series = null;
        series = new Series("Spline");
        series.Color = Color.FromArgb(220, 65, 140, 240);

if (rblChartType.SelectedValue == "0")
        {
            series.ChartType = SeriesChartType.Column;//柱狀圖
        }
else
        {
            series.ChartType = SeriesChartType.Line;//折線圖
        }
       Chart NewChart = ChartSetting(strStationID +"_"+ paramCode);
       IsShowAbnormal = cbAbnormalValue.Checked;

if (dsStationData == null)
       {
//標題
           NewChart.Titles.Add("：暫無相關值");
       }
else
       {
           NewChart.Titles.Add(strDefaultDataParamName);
for (int i = 0; i < dtData.Rows.Count; i++)
           {
               DataRow row = dtData.Rows[i];
string x = row["DataTime"] == null ? "" : row["DataTime"].ToString();
string y = row["dValue"] == null ? "0" : row["DataValue"].ToString();
               series.Points.AddXY(x, y);
//滑鼠移至上方顯示值
               series.Points[i].ToolTip = "檢測時間=[" + x + "]\n檢測值=" + y;
//處理按一下滑鼠時擷取的資料
               series.Points[i].PostBackValue = "series=" + series.Name + ",INDEX=#INDEX,X=#VALX,Y=#VALY,CODE=" + strDefaultDataParamName;
           }
       }
       NewChart.ChartAreas[0].AxisX.Title = "檢測時間";
       NewChart.ChartAreas[0].AxisY.Title = "檢測值" + "(" + CRtdData.GetParamUnit(paramCode) + ")";
       NewChart.Series.Remove(series);
       NewChart.Series.Add(series);
//NewChart.Series["Spline"].MapAreaAttributes = "onclick=javascript:alert('Data point with index #INDEX was clicked')";
       PanelChartInfo.Controls.Add(NewChart);//將chart添加到aspx頁面上的Panel控制項
    }

本文同步發表於：伊牛娃部落格

http://www.e6wa.com/Article/202.aspx