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实例－》CCurvesCtrl参考。

 

    有两个CCurvesCtrl demo，一个是用来一次性加载500万个点，并绘画出来，这一个过程在我的电脑上大约要3-5秒。另一个用来显示动态加点，并实时绘图。它们分别对应文件：CCurvesCtrl_静态数据.html、CCurvesCtrl_动态数据.html。如果要运行它们的话，请将它们“右键另存为”，并且，还需要下列js文件的支持（同样用“右键另存为”）（请从《WebGL自修教程.chm》中下载所有的文件）：

glMatrix-0.9.5.js
CCurvesCtrl.js
debug.js
gl-0.2.js

动态数据页面的运行效果如下：

该图表控件的功能还有很多没有完成，本人可能要失言，不完善它了。