本文介绍了如何使用JavaScript调用Office Web Components（OWC）在客户端生成图表，避免频繁请求服务器。文章详细展示了使用OWC创建各种图表（如柱状图、饼图等）的步骤，并提供了相关示例代码。通过封装ChartBean对象，简化了图表的创建过程，实现了在客户端灵活调整数据和图表类型的功能。示例中强调了OWC的使用条件，包括客户端需安装Office、OWC组件和IE浏览器。
对于javaEE企业级应用来讲，需要图示展示的地方很多，这些图示包括柱状图、饼状图、折线图、条状图以及分别对应的3d的展示。
在这方面基于java的开源的软件也很多，如我们常用的jfreechart，前面我也写了一篇文件对jfreechart进行封装之后只需要在jsp中写上对应的标签就可以显示对应的图示的一篇文件，地址是：http://blog.youkuaiyun.com/ma_shijie/archive/2009/11/02/4758391.aspx
但这些都有一个弊端，这些图示都是在服务器端生成后写到客户端的，客户端如果想修改其数据，那么必须到服务器端请求新的图示。有时候数据没有变，只是把柱状图改成饼图，这样也得需要在请求服务器端。即使使用ajax技术使客户端看不到这种延迟或请求，那服务器也是有请求的压力的。
本文则介绍一种新的方式来展示图示，所有展示过程都在客户端进行，只需要用js把对应的数据传给这个组件，并设置组件的一些属性，如图示类型（柱状图、饼状图等），则页面里就会显示出对应的图示。这个组件的优点是所有的操作都在客户端用js完成，减少连接服务器压力，而且可以用js随便调整数据、调整图示的属性，调整后新的图示则会立即显示出来。这些所有的操作都是在客户端来完成的。这个组件就是owc。
使用owc必须的条件：
1，客户端必须安装office
2，客户端必须安装owc组件，下载地址：http://download.microsoft.com/download/d/a/2/da2fbbe2-f67f-4d5c-a3cf-20ba877c0d1e/owc11.exe
3，客户端必须是ie浏览器。
因为这三个条件，所以使用owc的时候大家一定要注意把握拿捏。
owc在百度百科上的介绍：
Office Web Components是一组的COM控件，设计的目的是为众多的控件容器提供交互的电子表格建模，数据报表和数据可视化功能。OWC库包含四个主要的组件：电子表格组件，图表组件，透视表组件和数据源组件。
本文则主要介绍其图表组件。
看下面html界面里的代码：
该html在ie中浏览界面如下：
图0、html在ie中显示
点击上面的图示链接的文字，下面会分别显示对应的图示。
下面是对应图示的截图：
图1、 饼图
图2、 3D饼图
图3、 条状图
图4、 3D条状图
图5、 堆积条状图
图6、 3D堆积条状图
图7、 柱状图
图8、 3D柱状图
图9、 堆积柱状图
图10、3D堆积柱状图
如果dataSet里没有数据，则显示：
图11、没有数据时候显示
分析一下调用的js代码，首先是对dataSet赋值，其次是调用changeChart方法来显示图示，下面是这个方法体：
为什么简简单单几句js就能搞定这么多图示的？ 而且还能随意变换？ 答案是关键是ChartBean对象的定义。
不错，这个页面里引用了另外一个js，在这个js中定义了ChartBean对象.
下面是这个js的代码:
相信通过注释大家都能看懂这个js类的实现步骤。
总结 ：其实我感觉这不仅是一个js调用owc生成图示的例子，更是一种抽象、封装的思想。写图示有很多相同的地方，那么我们把这些东西抽象出来抽象出一个chartBean类，该类包括一些做图必须的属性，还封装了几种图示的实现。这样所有要展示图示的地方就不用从头到尾去写js调用owc图示组件了，只需要引入这个js，之后像方法changeChart那样写个四行代码就能搞定一个图示的展示。
完整的代码下载下载地址：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
