不用和服务器端通信也能生成图示，交互性比jfreechart强百倍

ma_shijie 2010-12-14 12:50:59

对于javaEE企业级应用来讲，需要图示展示的地方很多，这些图示包括柱状图、饼状图、折线图、条状图以及分别对应的3d的展示。

在这方面基于java的开源的软件也很多，如我们常用的jfreechart，前面我也写了一篇文件对jfreechart进行封装之后只需要在jsp中写上对应的标签就可以显示对应的图示的一篇文件，地址是：http://blog.csdn.net/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库包含四个主要的组件：电子表格组件，图表组件，透视表组件和数据源组件。

本文则主要介绍其图表组件。

...全文

137 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

ma_shijie 2010-12-14

打赏
举报

贴不上图片，详见:

http://blog.csdn.net/ma_shijie/archive/2010/12/13/6073915.aspx

ma_shijie 2010-12-14

打赏
举报

该html在ie中浏览界面如下：

图0、html在ie中显示

点击上面的图示链接的文字，下面会分别显示对应的图示。

下面是对应图示的截图：

图1、饼图

图2、 3D饼图

图3、条状图

图4、 3D条状图

图5、堆积条状图

图6、 3D堆积条状图

图7、柱状图

图8、 3D柱状图

图9、堆积柱状图

图10、3D堆积柱状图

如果dataSet里没有数据，则显示：

图11、没有数据时候显示

ma_shijie 2010-12-14

打赏
举报

看下面html界面里的代码：

<html>

<mce:script language="javascript"><!--

// 数据，封装成数组

// [["单位1","单位2"],[200,230],"2007"],["单位1","单位2"],[300,350],"2008"]]

var dataSet = new Array();

var dataSet1 = new Array();

dataSet1[0] = ["单位1","单位2"];

dataSet1[1] = [200,230];

dataSet1[2] = 2007;

var dataSet2 = new Array();

dataSet2[0] = ["单位1","单位2"];

dataSet2[1] = [300,350];

dataSet2[2] = 2008;

dataSet[0] = dataSet1;

dataSet[1] = dataSet2;

// 点击事件

function changeChart(chartType) {

	ChartBean.dataSet = dataSet;

	ChartBean.chartType = chartType;

	ChartBean.chart = Chart1;

	

	// 初始化图示

	ChartBean.initChart();

}

// --></mce:script>

<script language="javascript" src="owc_chart.js" mce_src="owc_chart.js"></SCRIPT>

<center>

<table width="60%" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">

  	  <TR align="center">

  	  	<TD height="10">

		  <a href="#" mce_href="#" onclick="changeChart('chChartTypePieExploded')" >饼图</a>    

		  <a href="#" mce_href="#" onclick="changeChart('chChartTypeBarClustered')" >条形图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeBarStacked','2')" >堆积条形图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeLineMarkers')" >折线图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeColumnClustered')" >柱状图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeColumnStacked')" >堆积柱状图</a>

		      

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeSmoothLineMarkers')" >曲线图</a>

		    </TD>

	  </TR>

	  <TR align="center">

		  <TD height="10">

		  <a href="#" mce_href="#" onclick="changeChart('chChartTypePieExploded3D')" >3D饼图</a>    

		  	<a href="#" mce_href="#" onclick="changeChart('chChartTypeBarClustered3D')" >3D条形图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeBarStacked3D')" >3D堆积条形图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeLine3D')" >3D折线图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeColumnClustered3D')" >3D柱状图</a>

		      <a href="#" mce_href="#" onclick="changeChart('chChartTypeColumnStacked3D')" >3D堆积柱状图</a>

		    </TD>

	  </TR>

  	  <tr>

	  	 <TD height="265"  colspan="2">

	      <object id= Chart1 classid='clsid:0002E556-0000-0000-C000-000000000046' style="width:100%;height:100%">

	        <PARAM NAME="FlatStyle" VALUE=1>

	      </OBJECT>

	    </TD>

  	  </tr>

</table>

</center>

</html>

ma_shijie 2010-12-14

打赏
举报

总结：其实我感觉这不仅是一个js调用owc生成图示的例子，更是一种抽象、封装的思想。写图示有很多相同的地方，那么我们把这些东西抽象出来抽象出一个 chartBean类，该类包括一些做图必须的属性，还封装了几种图示的实现。这样所有要展示图示的地方就不用从头到尾去写js调用owc图示组件了，只需要引入这个js，之后像方法changeChart那样写个四行代码就能搞定一个图示的展示。

完整的代码下载下载地址：

http://download.csdn.net/source/2906459