我们在使用Fusioncharts图表组件的时候,需要一些事件监听来帮助我们了解Flash加载图表数据的情况是怎么样的,特此总结了一下相关的事件API如下所示:
1、API:Initialize(初始化)事件
作用:提示用户Fusioncharts图表组件相关的Flash和JS文件等等是否准备就绪,能够创建Fusioncharts图表对象。
Code:
1.
///添加初始化完成的事件Initialized
2.
FusionCharts.addEventListener(
'Initialized'
,
function
(identifier, parameter) {
3.
alert(identifier.sender.id +
"图表已经初始化完成"
);
4.
});
5.
var
myChart =
new
FusionCharts(
"/swf/Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
6.
myChart.setXMLData(
' '
);
7.
myChart.render(
"chartContainer"
);
2、API:DataUpdated(数据更新)事件
作用:主要是监听图表组件有数据加载的时候就会提示这个信息
Code:
1.
///添加初始化完成的事件DataUpdated
2.
FusionCharts.addEventListener(
'DataUpdated'
,
function
(eventObject, argumentsObject) {
3.
alert(eventObject.sender.id +
"数据更新"
)
4.
});
3、API:Loaded(数据加载)事件
作用:主要是用于判断图表是否加载到指定的DIV容器内
Code:
1.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
2.
myChart.setXMLData(
' '
);
3.
myChart.render(
"chartContainer"
);
4.
///监听Loaded事件 判断是否已经加载数据
5.
myChart.addEventListener(
"Loaded"
,
function
(evt, args) {
6.
alert(evt.sender.id +
"图表已经被加载。"
);
7.
});
4、API:Rendered(呈现)事件
作用:主要是用于判断Flash图表是否已经呈现在DIV容器内,且已经能够看到Flash图表的雏形。
Code:
1.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
2.
myChart.setXMLData(
' '
);
3.
myChart.render(
"chartContainer"
);
4.
///监听Rendered事件 判断是否已经呈现于DIV容器内
5.
myChart.addEventListener(
"Rendered"
,
function
(evt, args) {
6.
alert(evt.sender.id +
"图表已经呈现于DIV容器内"
);
7.
});
5、API:DrawComplete(画完成)事件
作用:主要用于判断提供给Flash的数据是否完全在图标上得到展现,且全部完成。这个事件很重要,对于那些一个页面有多个图表,且需要一个个加载的时候,就可以使用这个事件,具体见如下Code中所述。
Code:
01.
function
DrawChartOne() {
02.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
03.
myChart.setXMLData(
' '
);
04.
myChart.render(
"chartContainer"
);
05.
//添加监听事件DrawComplete,判断图表是否画完全
06.
myChart.addEventListener(
"DrawComplete"
,
function
() {
07.
alert(
"图表1已经全部画完。"
);
08.
//开始这手加载图表2
09.
DrawChartTwo();
10.
}
11.
);
12.
}
13.
//加载图表2
14.
function
DrawChartTwo() {
15.
var
myChartTwo =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
16.
myChartTwo.setXMLData(
' '
);
17.
myChartTwo.render(
"chartContainer"
);
18.
//添加监听事件DrawComplete,判断图表是否画完全
19.
myChartTwo.addEventListener(
"DrawComplete"
,
function
() {
20.
alert(
"图表2已经全部画完。"
);
21.
//然后这里该干嘛就干嘛
22.
}
23.
);
24.
}
25.
//初始化页面 加载图表
26.
$(document).ready(
function
() {
27.
DrawChartOne();
28.
});
6、API:Resized(缩放)事件
作用:当图表大小(高、宽)值发生变化的时候,就会触发此事件。
Code:
1.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"100%"
,
"100%"
,
"0"
,
"1"
);
2.
myChart.setXMLData(
' '
);
3.
myChart.render(
"chartContainer"
);
4.
//监听缩放事件
5.
myChart.addEventListener(
"Resized"
,
function
(evt, args) {
6.
alert(evt.sender.id +
"图表已经缩放 从 ( width: "
+ args.prevWidth +
", height: "
+ args.prevHeight +
") 到 (width: "
+ args.width +
", height: "
+ args.height +
")"
);
7.
});
7、API:Exported(导出图表)事件
作用:当我们允许图表有导出菜单的情况下,导出图表的时候,会提示您是否可以导出。
Code:
1.
//监听图表导出事件
2.
myChart.addEventListener(
"Exported"
,
function
(evt, args) {
3.
alert(args.DOMId + (args.statusCode ?
" 图表已经导出"
:
"图表不能够被导出"
));
4.
});
8、API:PrintReadyStateChange(准备好打印)事件
9、API:BeforeLinkedItemOpen(点击图表内项目)事件
10、API:LinkedItemOpened(点击图表内项目已经响应)事件
11、API:BeforeLinkedItemClose(连接打开项目开始关闭)事件
12、API:LinkedItemClosed(连接打开项目已经关闭)事件
13、API:DataLoadError(图表数据加载错误)事件
作用:可以便于我们判断错误定位位置,数据源提供有误/Flash地址不正确/DIV容器不存在;
14、API:DataXMLInvalid(XML数据提供有问题)事件
作用:用于判断我们提供给Fusioncharts图表的XML数据格式存在问题;
Code:
1.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
2.
myChart.setXMLData(
" >"
);
3.
myChart.render(
"chartContainer"
);
4.
//用户判断XML数据格式存在错误
5.
function
FC_DataXMLInvalid(DOMId) {
6.
alert(
"Invalid XML data error occured in chart having id - "
+ DOMId);
7.
}
15、API:NoDataToDisplay(没有数据)事件
作用:用于判断提供给图表的数据没有。只有一个空空的chart。
Code:
1.
var
myChart =
new
FusionCharts(
"../../../../Charts/Column3D.swf"
,
"myChartId"
,
"400"
,
"300"
,
"0"
,
"1"
);
2.
myChart.setXMLData(
" "
);
3.
myChart.render(
"chartContainer"
);
4.
//用户判断图表没有任何数据
5.
function
FC_NoDataToDisplay(DOMId) {
6.
alert(
"没有人任何数据展示在图表内- "
+ DOMId);
7.
}
16、API:BeforeDispose(图表即将释放)事件
Code:
1.
FusionCharts.addEventListener(FusionChartsEvents.BeforeDispose,
function
(identifier, parameter) {
2.
alert(identifier.sender.id +
"图表即将释放"
);
3.
});
17、API:Disposed(图表已经释放)事件
Code:
1.
FusionCharts.addEventListener(
"Disposed"
,
function
(identifier, parameter) {
2.
alert(identifier.sender.id +
"图表已经释放掉。"
);
3.
});
文章来源:http://www.stepday.com/topic/?290