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