portal中应用fusionchart

为了实现可定制化,新的项目中运用portal技术,封装出来每一个portlet,用来满足不同客户的不同偏好需求。如下图:

每一个小窗口就是一个portlet,可以定制布局,可以拖动位置,可以添加删除。

这里只说说fusionchart的使用。

使用JS加载

这个JS类文件就在FusionChartsFree>JSClass文件夹下,我们把它拷贝到c:\FusionCharts\FusionCharts下面。
现在,我们把原来的Chart.html复制一份,命名为JSChart.html。这样做是为了避免直接在Chart.html上进行修改,因为以后还要用到Chart.html,
下面就是JSChart.html的代码。

<html>   
    <head>   
        <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>   
    </head>     
<body bgcolor="#ffffff">   
   <div id="chartdiv" align="center">图形将出现这个DIV里,到时这里的字将被图形替代。</div>   
    <script type="text/javascript">   
       var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", "500");    
        myChart.setDataURL("Data.xml");    
        myChart.render("chartdiv");    
   </script>   
</body>   
</html>

 

首先,我们用下面的语句来加载FusionCharts.js文件。
  <script language="JavaScript" src="../FusionCharts/FusionCharts.js"></script>  

然后,我们定义了一个DIV,它还有个id。
  <div id="chartdiv" align="center">图形将出现这个DIV里,到时这里的字将被图形替代。</div> 

我们的图形就出现在这个DIV里。
接着,我们用四个参数建立了一个FusionCharts对象,
  var myChart = new FusionCharts("../FusionCharts/FCF_Column3D.swf""myChartId""600""500");  

第一个参数是SWF文件的地址。
第二个是图形的id。这个id你可以随便叫什么,但是要注意,在后面我们讲到一个页面里有多个图形的时候,这个id一定要是唯一的。(portal中每一个fusionchart图表都是一个jsp页面,稍有不注意我们这个id就一样了,然后在portal页面加载时候就出现了数据混乱,甚至不能正常显示。)

第三个参数是图形的宽。
第四个参数是图形的高。

虽然文档上写设置图表的自适应宽度为百分比是OK的,但是显然在某些未知原因下,依然是不起作用的.

最直接的方式就是,修改宽度为数值类型(px)单位,如果一定要设置为百分比,可以尝试把生成图表的js写成一个方法,在onload里执行。


我们还要设置数据文件的地址。
  myChart.setDataURL("Data.xml");  

最后,我们把图形渲染在指定的地方。
  myChart.render("chartdiv");  

"chartdiv"就是前面的DIV的id,这就表示把图形render到"chartdiv"。

 

posted @ 2011-10-31 10:58  大胡子荷西  阅读(492)  评论(0编辑  收藏  举报