c# mschart 學習

一、本文描述

mschart繪制數據柱狀圖/折線圖

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

 二、效果圖

  1、折線圖

   2、柱狀圖

 

三、代碼創建ms chart

/// <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

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