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

posted @ 2012-03-02 21:33 伊牛娃 阅读(...) 评论(...) 编辑 收藏