散点图增加趋势线

　　不知不觉年后上班一个多月了，2011年的一个季度就这样快过完了，天气也渐渐暖和了。就等着天气热了，可以去校园篮球场上耍耍，有段日子没碰篮球了，也有段日子没写博客了，都不知道有什么东西可写，这就说明了自己这段日子没学习了，后面必须加油，全力准备系统集成项目管理工程师的考试了。

　　根据标题大家也应该清楚这篇文章的主题了，这是年后上班闲的时候利用Dundas Chart控件做的一个图形。由于项目组重组，一直忙没顾上写这篇文章。今天总算有闲暇时间，写这篇文章供大家参考学习。其实，也可以使用MS Chart完成，效果都是一样的。

　　首先，呈现Default.aspx页面代码：

View Code

1 <% @ Page Language = " C# " AutoEventWireup = " true " CodeFile = " Default.aspx.cs " Inherits = " _Default " %>
2
3 <% @ Register assembly = " DundasWebChart " namespace = " Dundas.Charting.WebControl " tagprefix = " DCWC " %>
4
5 <% @ Register assembly = " System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35 " namespace = " System.Web.UI.DataVisualization.Charting " tagprefix = " asp " %>
6
7 <! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
8
9 < html xmlns = " http://www.w3.org/1999/xhtml " >
10 < head runat = " server " >
11 < title ></ title >
12 </ head >
13 < body >
14 < form id = " form1 " runat = " server " >
15 < div >
16 < DCWC:Chart ID = " Chart1 " runat = " server " Height = " 400px " Width = " 500px " Palette = " Pastel " >
17 < legends >
18 < DCWC:Legend Alignment = " Center " DockInsideChartArea = " False "
19 DockToChartArea = " Default " Name = " Default " >
20 </ DCWC:Legend >
21 </ legends >
22 < Titles >
23 < DCWC:Title DockInsideChartArea = " False " DockToChartArea = " Default "
24 Font = " 华文宋体, 15pt " Name = " Title1 " Text = " 多项式趋势线 " >
25 </ DCWC:Title >
26 </ Titles >
27 < series >
28 < DCWC:Series BorderColor = " 64, 64, 64 " Name = " Series1 " ShadowOffset = " 1 " >
29 </ DCWC:Series >
30 < DCWC:Series BorderColor = " 64, 64, 64 " Name = " Series2 " ShadowOffset = " 1 " >
31 </ DCWC:Series >
32 < DCWC:Series Name = " Series3 " >
33 </ DCWC:Series >
34 </ series >
35 < chartareas >
36 < DCWC:ChartArea Name = " Default " >
37 </ DCWC:ChartArea >
38 </ chartareas >
39 </ DCWC:Chart >
40 </ div >
41 </ form >
42 </ body >
43 </ html >

　　接着，呈现Default.aspx.cs页面代码：

View Code

1 protected void Page_Load( object sender, EventArgs e)
2 {
3 Chart1.Series[ 0 ].Type = SeriesChartType.Point;
4 Chart1.Series[ 0 ].Color = Color.Red;
5 Chart1.Series[ 0 ].MarkerStyle = MarkerStyle.Circle;
6 Chart1.Series[ 1 ].Type = SeriesChartType.Spline;
7 Chart1.Series[ 1 ].Color = Color.Blue;
8 Chart1.Series[ 2 ].Type = SeriesChartType.Spline;
9 Chart1.Series[ 2 ].Color = Color.Green;
10
11 drawLine();
12 }
13 public void drawLine()
14 {
15 double [] xVal = new double [ 6 ] { 1 , 2 , 3 , 4 , 5 , 6 };
16 double [] yVal = new double [ 6 ] { 24 , 13 , 63 , 35 , 56 , 8 };
17 double [] fiting = new double [ 6 ];
18 double [] modulus = new double [ 2 ];
19 double [] yNew = new double [ 6 ];
20 string formula = "" ;
21 double a = 0 , b = 0 ;
22
23 bool tag = CurveSimulate.linefit.CalculateLine(xVal, yVal, ref modulus);
24
25 if (tag)
26 {
27 a = Math.Round(modulus[ 0 ], 3 );
28 b = Math.Round(modulus[ 1 ], 2 );
29 formula = a.ToString() + " * x + " + b.ToString();
30 for ( int i = 0 ; i < 6 ; i ++ )
31 {
32 yNew[i] = b + a * xVal[i];
33 Chart1.Series[ 0 ].Points.AddXY(i + 1 , yVal[i]);
34 Chart1.Series[ 2 ].Points.AddXY(i + 1 , yNew[i]);
35 }
36 Chart1.Series[ 2 ].Name = formula;
37 }
38 }

　　最后，趋势线的计算方法：

View Code

1 public class linefit
2 {
3 /// <summary>
4 /// 根据离散点计算线性方程【f(x)=ax+b】
5 /// </summary>
6 /// <param name="x"> X轴坐标集合 </param>
7 /// <param name="y"> Y轴坐标集合 </param>
8 /// <param name="modulus"> 线性方程系数，一次 a，常量 b </param>
9 /// <returns> 返回True </returns>
10 public static bool CalculateLine( double [] x, double [] y, ref double [] modulus)
11 {
12 double xe, ye, xye, xxe, sx = 0 , sy = 0 , sxy = 0 , sxx = 0 , a, b;
13 int count = x.Length;
14 double [,] ar = new double [count, 2 ];
15
16 for ( int i = 0 ; i < count; i ++ )
17 {
18 ar[i, 0 ] = x[i];
19 ar[i, 1 ] = y[i];
20 }
21
22 for ( int m = 0 ; m < count; m ++ )
23 {
24 sx = sx + ar[m, 0 ];
25 sy = sy + ar[m, 1 ];
26 sxx = sxx + ar[m, 0 ] * ar[m, 0 ];
27 sxy = sxy + ar[m, 0 ] * ar[m, 1 ];
28 }
29 xe = sx / count;
30 ye = sy / count;
31 xye = sxy / count;
32 xxe = sxx / count;
33 a = Math.Round((xye - xe * ye) / (xxe - xe * xe), 3 );
34 b = Math.Round(ye - a * xe, 3 );
35
36 modulus[ 0 ] = a;
37 modulus[ 1 ] = b;
38
39 return true ;
40 }
41 }

　　预览图：

　　总结：

　　本篇文章的技术核心是在趋势线公式的计算方法，其余的实现都是很简单的，但是也花费了很多精力和查找资料，最终完成了上面图的效果。

　　如果大家还有其它的好的方法，可以拿出来分享；或者知道其它好的绘图控件集成这样的功能，也可以提出来，供大家一块学习。