WebGL自学教程－－示例：图表控件

 

CCurvesCtrl

　　

    一开始的时候，我在工作中碰到一个问题，我想把数据导出为Web格式的报表。唯一的问题是，我们的报表中需要一个显示曲线图、散点图、柱状图之类的图表，曲线图和散点图的数据规模在百万级别。我用VML实现了这个图表，但效果很不理想。我于是想找找能够在Web上高效绘图的东西，并且不能使用ActiveX之类的控件。我找到了Web3D，我选择了向标准靠拢。于是，我的WebGL学习之旅开始了。

    到目前为止，一些WebGL的高级应用，主要是和3D密切相关的一些技术，我还不会。但是，我先满足一下我的小小欲望，将图表实现。

    散点图、柱状图和曲面图先不考虑，我首先实现一个曲线图的绘画，并设计为一个js类：CCurvesCtrl。

 

    CCurvesCtrl的功能主要有：添加/删除/枚举(访问、获取)曲线；添加和枚举曲线返回曲线对象（CCurve类型）。CCurvesCtrl还要提供一些UI接口，包括返回图表的标题对象（CTitle类型）、图例对象（CLegend类型）、网格对象（CGrid）、坐标轴对象（CAxis）。为方便地对多个曲线执行相同的操作，如，显示、隐藏等，还需要把曲线需要包含在某个组中。组用类型CGroup表示。

    CCurve的操作主要针对数据，包括添加、删除、清空等。

    所有js类、枚举等的接口等，请参考最新（v 2011-11-22）的《WebGL自修教程.chm》－》WebGL实例－》CCurvesCt