本文介绍了作者在工作中使用WebGL解决Web报表中高效绘图问题的经历，特别是针对曲线图的实现。通过创建js类CCurvesCtrl，支持曲线的添加、删除和枚举操作，并提供了UI接口如标题、图例、网格和坐标轴。作者提供了两个DEMO，一个演示一次性加载并绘制500万个点，另一个展示动态加点和实时绘图。虽然功能尚未完善，但已展示了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
最低0.47元/天 解锁文章
扫一扫
4364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
