通过使用richfaces 3.3对FusionCharts V3产生的图表自动进行刷新。内容刷新，不是整个swf区域刷新
来源：互联网 发布：tensorflow是什么 编辑：程序博客网 时间：2024/06/04 18:51
在jsf中，我通过FusionChartsV3来产生图表。同时使用了jsf的push技术，来自动更新图表的数据。
利用到的组件有
- <a4j:push>
- FusionCharts
主界面的xhtml和显示图表的xhtml界面如下：
- index.xtml
- 图表的xhtml
需要注意的有以下几点
- 总体思路是：通过push机制。在后台数据有回调的情况下。使用了a4j:push 的oncomplete属性调用一个javascript方法，并且把后台bean的内容（画图表所需要的data xml字符串）作为参数赋值传递个这个方法。这个方法去调用FushionCharts的js刷新方法去重绘图表。经过测试不能直接在js的方法中使用后台bean的el表达式。否则后台数据变化后，前台js方法不会得到新的值。可能是因为a4j:push无法去让js方法刷新的原因。
- 另外一种思路是，通过a4j:push的reRender属性。去刷新整个包含图表的<rich:panel>区域。也可以刷新。但是这个方法会导致整个swf重新载入，显示效果相当不理想。
- function redrawAllCharts()这个函数一定要定义在主程序的js区域。不能定义在各个图表的xhtml里面。否则在运行到 chartObj = getChartFromId(chartObjectList[i]);这个方法的时候。会拿不到 chartSWF的对象。在FF下调试会出现一个warning。说需要使用document.getElementByID方法来获得对象。显而易见，利用这个函数是无法获得fushionCharts特定对象的。
- chartObj = getChartFromId(chartObjectList[i]); 这个方法中的参数，应该和图表的xhtml中语句myTypeFChart = new FusionCharts("./FusionCharts/MSLine.swf","chartSwfTypeF", "330", "300", "0", "1"); 中的"chartSwfTypeF"变量相对应。而不是div的id。
- myTypeFChart.render("myMSLineChartTypeFDiv");render的参数应该是需要画图表的div的ID。
- new FusionCharts("./FusionCharts/MSLine.swf","chartSwfTypeF", "330", "300", "0", "1");倒数第二个参数表示图表是否显示debug模式。最后一个参数表示一定要设置成1，不能用缺省值0.否则不会刷新 。
官方有关这个参数的说明如下：Registering with JavaScript and tracking the rendered event For this example, create a simple HTML page BasicExample.html with the following code: <HTML>
<HEAD>
<TITLE>FusionCharts & JavaScript - Basic Example</TITLE>
<SCRIPT LANGUAGE="Javascript" SRC="../../FusionCharts/FusionCharts.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
//FC_Rendered method is called whenever a FusionCharts chart on the page
//has finished initial rendering. To this function, the chart passes its
//own DOM Id.
function FC_Rendered(DOMId){
//If it's our required chart
if (DOMId=="chart1Id"){
//Simply alert
window.alert("Look Ma! I am Column3D and I've finished loading and rendering.");
return;
}
}
</SCRIPT>
</HEAD>
<BODY>
<div id="chart1div">
FusionCharts
</div>
<script language="JavaScript">
var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");
chart1.setDataXML("<chart><set label='A' value='10' /><set label='B' value='11' /></chart>");
chart1.render("chart1div");
</script>
</BODY>
</HTML>In the above code, we are first creating a Column3D chart using FusionCharts JavaScript class. We set the DOM Id of the chart as chart1Id. It is this ID using which the chart will now be recognized in the HTML page. You need to make sure that each chart on the page gets a different Id, else the browser would start behaving weirdly.
To register the chart with JavaScript, we set the registerWithJS parameter to 1. It's the last parameter in FusionCharts constructor function.
var chart1 = new FusionCharts("../../FusionCharts/Column3D.swf", "chart1Id", "400", "300", "0", "1");
Now, we've provided a basic XML data document to chart using its setDataXML method. Finally, we render the chart.
If you now switch to <SCRIPTS> section of HTML <HEAD>, you'll find the following function:
<SCRIPT LANGUAGE="JavaScript">
//FC_Rendered method is called whenever a FusionCharts chart on the page
//has finished initial rendering. To this function, the chart passes its
//own DOM Id.
function FC_Rendered(DOMId){
//If it's our required chart
if (DOMId=="chart1Id"){
//Simply alert
window.alert("Look Ma! I am Column3D and I've finished loading and rendering.");
return;
}
}
</SCRIPT>The above function FC_Rendered() gets invoked whenever a FusionCharts chart (on the page) has finished rendering for the first time. To this function, the chart passes its own DOM Id, so that we can cross refer to it.
In our example, when the Column 3D chart (with DOM Id chart1ID) has finished rendering, it calls this function too. In this function, we check if it was invoked by our required Column 3D chart. To do so, we match the DOM Id passed to this id with the DOM Id of our Column chart. This is useful when you've multiple charts on page and you want to track loading of each of those charts.
Finally, in this function, we output a message to the user that the chart has been loaded. In your applications, you can put in application logic here (or AJAX code) to get data or build data and then update the chart, which we'll soon see.
Now that you're famililar with the basic concepts of FusionCharts and JavaScript, we'll next see how to change the data of a chart at client side using setDataXML method.
- 通过使用richfaces 3.3对FusionCharts V3产生的图表自动进行刷新。内容刷新，不是整个swf区域刷新
- FusionCharts 的刷新
- Guava的自动刷新使用
- tkinter 自动刷新高度可控的内容
- android gridview listview控件内容刷新 而不是整个页面刷新
- jfreechart图表的数据刷新
- jfreechart图表的数据刷新
- 自动刷新的方法
- DomainDataSource的自动刷新
- 内存的自动刷新与自刷新
- 简单的自动刷新或者下拉刷新
- 网页自动刷新，不产生嗒嗒声的一个解决方法
- 刷新Tableview的行，刷新tableview的整个区
- 自动刷新
- 自动刷新
- 刷新
- 刷新
- 刷新
- “试图执行的操作不受支持”解决
- 回归测试相关概念及经验总结
- 的收费大幅度
- Web服务发现技术综述
- 客户关系管理CRM的魅力所在
- 通过使用richfaces 3.3对FusionCharts V3产生的图表自动进行刷新。内容刷新，不是整个swf区域刷新
- 解决异常“SqlParameterCollection 只接受非空的 SqlParameter 类型对象。”
- 解决方案、项目与文件的关系
- IE网页显示空白解决方法
- Buffalo ajax实例
- Class.forName 与 new()
- 终于有了积分了
- 好朋友的特点
- 数据类型取值范围
