用JavaScript实现动态图形

阅读更多

用JavaScript实现动态图形

1．JavaScript与2D图形

JavaScript的神奇之处远远超过一般程序员的想象。JavaScript可以实现所有的二维图形。看到我的Blog左面，它就是使用JavaScript和Google公司用JavaScript开发的excanvas写出来的。

It's time to reuse!

什么是 excanvas 呢？ Firefox ， Safari 和 Opera9 都支持 canvas tag ， canvas 用来绘制 2D 图形。但是 IE 不支持 canvas 。 Google 就开发了 excanvas ，模拟 canvas 在其他浏览器的状态，这样 IE 也可以使用 canvas 了。下面是一组更复杂的图形：

下面是这一组图形的实现。中，包含了excanvas的内容，因为Blog里不能放.js文件，我只能将excanvas的内容全面拷贝在HTML文件里。后面的function DrawChart(elname)到function DrawChart5(elname)，是绘图的5个方法。这5个方法都是我原文拷贝JavaScript canvas经典例子的源代码。

Html内容中，body tag负责调用这5个方法，其中的参数是canvas tag id。

canvas tag是图形绘制的位置。

2．JavaScript 动态2D图形与数据交换

当我第一次接触http://www.liquidx.net/plotkit/时，我才意识到JavaScript的强大。PlotKit是JavaScript Chart Plotting, 既JavaScript图形开发工具，它将JavaScript的绘图功能封装为三种较复杂的具有数据交互功能的图形，饼状图，矩形图和二维曲线图。

我使用二维曲线图和JavaScript Timer模拟简单的动态股票行情。

如下图，该图每1秒更新一次数据。

等include Plotkit的js文件。

var plotter 为绘图对象

var newRows用来显示动态表数据， 图中的Last列。

var options 变量为绘图参数。

createData方法生成三组随机数据，既右图的3条变化曲线。

DrawChart更新图形和表数据。

Beginning创建图形和启动Timer。

HTML Body中的

是从文件table.csv中导入表中的Symbol列和Name列。

table.csv的内容与格式如下：

Symbol,Name

ADBE,Adobe Systems Incorporated

AIG,American International Group Inc

BA,Boeing Company

是显示图形。