一、本文描述

mschart绘制数据柱状图/折线图

1、根据时间，以及时间点的数据进行绑定，并显示为柱状图，折线图

2、可动态(无需在页面添加asp.Chart控件)绘制1中的两种图表，显示在页面上

3、鼠标在坐标点上悬停时，可显示当前坐标点的时间值，数据值

4、鼠标单击时，可获取当前点击坐标点的横纵坐标的数据值,并通过脚本转向新页面

5、关于坐标轴绑定时间点，存在时间点不连续的情况，尽量不要使用DataSource进行数据绑定；

使用Points.AddXY()进行绑定后，不会出现时间点不连续而出现空白，使相邻的两条柱状条相隔较远

二、效果图

  1、折线图

   2、柱状图

 

三、代码创建ms chart

/// 
 /// 设置Chart基本信息 /// 
 ///  /// 
           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 = "οnclick=javascript:alert('Data point with index #INDEX was clicked')";        PanelChartInfo.Controls.Add(NewChart);//将chart添加到aspx页面上的Panel控件     }

本文同步发表于：