用ASP.NET with C# 绘制曲线图（Curve图）转

 

画曲线图，网上有很多代码可以参考，也有不少开放的组件可以用，但是我是本着自己能写就自己写的原则，毕竟自己写的代码所有过程清楚明白，放心！错了也得了一个教训，值得！

网上的例子多数画曲线图是用DrawLine（）函数将各个点一点一点连接起来，所以大部分时候也叫折线图。但是.NET中还有一个DrawCurve（）函数，它可以直接画出一条曲线或者折线，还可以设置张力（Tension）值，比用DrawLine（）方便德多也好用得多！

好了，不废话，先看看最终生成的效果图：

曲线图可以缩放，随意定义X轴和Y轴代表的大小，还可以定义Y轴的起始值，张力值等等。全部元素颜色都可以自定义。

怎么样？还可以吧，呵呵，下边开始说明画图步骤：

首先，需要初始化图像，例如定义图像对象，填充背景，画出X轴和Y轴以及轴上的刻度等，先来看看我们Curve类的初始化函数InitializeGraph（）：

 

            //初始化和填充图像区域，画出边框，初始标题
            private void InitializeGraph()
            }

具体每个函数有什么作用代码注释已经很清楚了。现在我们继续来看SetAxisText（）

 

            private void SetAxisText(ref Graphics objGraphics)
            }

SetAxisText（）的作用是初始化轴线的说明文字，注意这不是刻度上的文字哦。呵呵，下边这两个才是初始化刻度和刻度上的文字，SetXAxis（）和SetYAxis（）：

 

            private  void SetXAxis(ref Graphics objGraphics)
            }

需要注意的是两个函数都定义了一个Scale的浮点值，该值就是缩放X轴和Y轴的关键，因为X轴一般代表日期，Y轴一般代表数值，所以Y轴还定义多了一个YSliceValue和YSliceBegin一起完成Y轴的缩放操作。具体看代码应该可以看出来。

最后初始化的是图像的标题：

 

            //初始化标题
            private void CreateTitle(ref Graphics objGraphics)
            }

至此，图像初始化已经顺利完成了，初始化后的图像如下：

万事俱备，只欠曲线了，这时候，我们要用到DrawCurve（）函数了，该函数具体用法可以自己看MSDN，先看看代码：

 

            private void DrawContent(ref Graphics objGraphics)
            }

由于X轴Y轴都有缩放，所以要设置两个编译量Offset1和Offset2，使曲线产生相应变化。

至此，曲线图完成，当然，画折线也是可以的，下图就是更改属性后生成的折线，数值和第一幅图片一样。

 
源码：点击下载Curve.rar
 

画曲线图，网上有很多代码可以参考，也有不少开放的组件可以用，但是我是本着自己能写就自己写的原则，毕竟自己写的代码所有过程清楚明白，放心！错了也得了一个教训，值得！

网上的例子多数画曲线图是用DrawLine（）函数将各个点一点一点连接起来，所以大部分时候也叫折线图。但是.NET中还有一个DrawCurve（）函数，它可以直接画出一条曲线或者折线，还可以设置张力（Tension）值，比用DrawLine（）方便德多也好用得多！

好了，不废话，先看看最终生成的效果图：

曲线图可以缩放，随意定义X轴和Y轴代表的大小，还可以定义Y轴的起始值，张力值等等。全部元素颜色都可以自定义。

怎么样？还可以吧，呵呵，下边开始说明画图步骤：

首先，需要初始化图像，例如定义图像对象，填充背景，画出X轴和Y轴以及轴上的刻度等，先来看看我们Curve类的初始化函数InitializeGraph（）：

 

            //初始化和填充图像区域，画出边框，初始标题
            private void InitializeGraph()
            }

具体每个函数有什么作用代码注释已经很清楚了。现在我们继续来看SetAxisText（）

 

            private void SetAxisText(ref Graphics objGraphics)
            }

SetAxisText（）的作用是初始化轴线的说明文字，注意这不是刻度上的文字哦。呵呵，下边这两个才是初始化刻度和刻度上的文字，SetXAxis（）和SetYAxis（）：

 

            private  void SetXAxis(ref Graphics objGraphics)
            }

需要注意的是两个函数都定义了一个Scale的浮点值，该值就是缩放X轴和Y轴的关键，因为X轴一般代表日期，Y轴一般代表数值，所以Y轴还定义多了一个YSliceValue和YSliceBegin一起完成Y轴的缩放操作。具体看代码应该可以看出来。

最后初始化的是图像的标题：

 

            //初始化标题
            private void CreateTitle(ref Graphics objGraphics)
            }

至此，图像初始化已经顺利完成了，初始化后的图像如下：

万事俱备，只欠曲线了，这时候，我们要用到DrawCurve（）函数了，该函数具体用法可以自己看MSDN，先看看代码：

 

            private void DrawContent(ref Graphics objGraphics)
            }

由于X轴Y轴都有缩放，所以要设置两个编译量Offset1和Offset2，使曲线产生相应变化。

至此，曲线图完成，当然，画折线也是可以的，下图就是更改属性后生成的折线，数值和第一幅图片一样。

 
源码：点击下载Curve.rar