js调用owc生成图示例子

 

对于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库包含四个主要的组件：电子表格组件，图表组件，透视表组件和数据源组件。

 

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

 

看下面html界面里的代码：

饼图 条形图 堆积条形图 折线图 柱状图 堆积柱状图 曲线图

3D饼图 3D条形图 3D堆积条形图 3D折线图 3D柱状图 3D堆积柱状图

 

 

该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方法来显示图示，下面是这个方法体：

// 点击事件 function changeChart(chartType) { ChartBean.dataSet = dataSet; ChartBean.chartType = chartType; ChartBean.chart = Chart1; // 初始化图示 ChartBean.initChart(); }

 

 

为什么简简单单几句js就能搞定这么多图示的？ 而且还能随意变换？ 答案是关键是ChartBean对象的定义。

不错，这个页面里引用了另外一个js，在这个js中定义了ChartBean对象.

 

下面是这个js的代码:

 

/* 实现图示显示。 实现的图包括： 饼图 条形图 堆积条形图 折线图 柱状图 堆积柱状图 曲线图 3D饼图 3D条形图 3D堆积条形图 3D折线图 3D柱状图 3D堆积柱状图 数据源： 数组 数组为包括三个元素数组的数组，第一个为坐标轴显示的值，第二个为坐标轴显示对应的值，第三个为图例。 如[["行政单位","事业单位"],[200,230],"2007"],["行政单位","事业单位"],[300,350],"2008"]] 使用步骤： 1,给dataSet赋值。 2,给chartType赋值，owc中枚举ChartChartTypeEnum。 3,给chart赋值，为html中图示所在的object的id。 4,给chartName赋值，为图示的标题。 5,调用initChart方法初始化图示显示。 5,结束。 */ var ChartBean = { chartType:"", // 图片类型，对应owc中枚举ChartChartTypeEnum，但只实现了其中的一部分图表 chart:"", // 图表，对应在页面上的一个chart的位置 dataSet:new Array(), // 数据，数组格式 chartName:"", // 图表名称 initChart:function(){ // 如果没有数据，则给出提示 if(this.dataSet.length <= 0){ this.chart.style.display = "none"; this.chart.parentNode.innerHTML = this.chart.parentNode.innerHTML + "

所选择的信息没有数据。"; }else{ var html = this.chart.parentNode.innerHTML; var pos = html.indexOf("所选择的信息没有数据"); if( pos >= 0){ this.chart.style.display = ""; this.chart.parentNode.removeChild(document.getElementById("chart_msg")); } } // 校验是否对ChartBean的属性是否赋值 if(!this.check()){ return; } var i; var mSeries; var axs; this.chart.Clear(); var chConstants = this.chart.Constants; //边框颜色 this.chart.Border.Color="white"; var backColor = 230 + 256 * 230 + 65536 * 230; this.chart.Interior.Color=backColor.toString(16); //设置标题的字体字号 this.chart.HasChartSpaceTitle = true; this.chart.ChartSpaceTitle.Font.Name = "新宋体"; this.chart.ChartSpaceTitle.Font.Size = 12; this.chart.ChartSpaceTitle.Font.Bold = false; this.chart.ChartSpaceTitle.Caption = this.chartName; this.chart.HasChartSpaceLegend = true; this.chart.ChartSpaceLegend.Font.Name = "新宋体"; this.chart.ChartSpaceLegend.Font.Size = 9; this.chart.ChartSpaceLegend.Position = chConstants.chLegendPositionBottom; // 不是饼图的话走下面的代码 if(this.chartType != "chChartTypePieExploded" && this.chartType != "chChartTypePieExploded3D"){ var chtNewChart =this.chart.Charts.Add(); if(this.chartType == "chChartTypeColumnStacked"){ chtNewChart.Type = chConstants.chChartTypeColumnStacked; }else if(this.chartType == "chChartTypeColumnStacked3D"){ chtNewChart.Type = chConstants.chChartTypeColumnStacked3D; }else if(this.chartType == "chChartTypeColumnClustered"){ chtNewChart.Type = chConstants.chChartTypeColumnClustered; }else if(this.chartType == "chChartTypeColumnClustered3D"){ chtNewChart.Type = chConstants.chChartTypeColumnClustered3D; }else if(this.chartType == "chChartTypeBarClustered3D"){ chtNewChart.Type = chConstants.chChartTypeBarClustered3D; }else if(this.chartType == "chChartTypeBarClustered"){ chtNewChart.Type = chConstants.chChartTypeBarClustered; }else if(this.chartType == "chChartTypeBarStacked"){ chtNewChart.Type = chConstants.chChartTypeBarStacked; }else if(this.chartType == "chChartTypeBarStacked3D"){ chtNewChart.Type = chConstants.chChartTypeBarStacked3D; }else if(this.chartType == "chChartTypeLineMarkers"){ chtNewChart.Type = chConstants.chChartTypeLineMarkers; }else if(this.chartType == "chChartTypeLine3D"){ chtNewChart.Type = chConstants.chChartTypeLine3D; }else if(this.chartType == "chChartTypeSmoothLineMarkers"){ chtNewChart.Type = chConstants.chChartTypeSmoothLineMarkers; } //设置背景颜色 var decColor = 200 + 256 * 200 + 65536 * 228; chtNewChart.PlotArea.Interior.Color = decColor.toString(16); // 三维图表的旋转角度。有效范围为 0 到 360 chtNewChart.Rotation = 0; chtNewChart.ChartDepth = 30; // 指定三维图表的视图斜率。有效范围为 -90 到 90 chtNewChart.Inclination = 0; // chtNewChart.BarWidth = 7200; // 不支持此属性 } for (i = 0; i < this.dataSet.length; i++) { // 如果是饼图 if(this.chartType == "chChartTypePieExploded" || this.chartType == "chChartTypePieExploded3D"){ if(this.chartType == "chChartTypePieExploded"){// 饼图 var chtNewChart =this.chart.Charts.Add(); chtNewChart.Type = chConstants.chChartTypePieExploded; }else if(this.chartType == "chChartTypePieExploded3D"){// 3D饼图 var chtNewChart =this.chart.Charts.Add(); chtNewChart.Type = chConstants.chChartTypePieExploded3D; } //设置背景颜色 var decColor = 200 + 256 * 200 + 65536 * 228; chtNewChart.PlotArea.Interior.Color = decColor.toString(16); } mSeries=chtNewChart.SeriesCollection.Add(); var dlSeries1Labels = mSeries.DataLabelsCollection.Add(); dlSeries1Labels.Position = chConstants.chLabelPositionCenter; dlSeries1Labels.HasValue = false; // 如果是饼图，则显示百分比 if(this.chartType == "chChartTypePieExploded" || this.chartType == "chChartTypePieExploded3D"){ dlSeries1Labels.HasPercentage = true; } mSeries.Caption=this.dataSet[i][2]; mSeries.SetData(chConstants.chDimCategories, chConstants.chDataLiteral, this.dataSet[i][0]); mSeries.SetData(chConstants.chDimValues, chConstants.chDataLiteral, this.dataSet[i][1]); } }, check:function(){ if(this.chartType == ""){ alert("请先给chartType赋值！"); return false; } if(this.chart == ""){ alert("请先给chart赋值！"); return false; } return true; } }

 

相信通过注释大家都能看懂这个js类的实现步骤。

 

 

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

 

 

 

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

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