FusionCharts使用教程：事件API總結(jié)

---

1、FusionCharts API：Initialize（初始化）事件

提示用戶FusionCharts圖表組件相關(guān)的Flash和JS文件等等是否準(zhǔn)備就緒，能夠創(chuàng)建FusionCharts圖表對(duì)象。

///添加初始化完成的事件Initialized
FusionCharts.addEventListener('Initialized', function (identifier, parameter) {
alert(identifier.sender.id + "圖表已經(jīng)初始化完成");
});
var myChart = new FusionCharts("/swf/Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChart.render("chartContainer");

2、FusionCharts API：DataUpdated（數(shù)據(jù)更新）事件

主要是監(jiān)聽圖表組件有數(shù)據(jù)加載的時(shí)候就會(huì)提示這個(gè)信息。

///添加初始化完成的事件DataUpdated
FusionCharts.addEventListener('DataUpdated', function (eventObject, argumentsObject) {
alert(eventObject.sender.id + "數(shù)據(jù)更新")
});

3、FusionCharts API：Loaded（數(shù)據(jù)加載）事件

主要是用于判斷圖表是否加載到指定的DIV容器內(nèi)

var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChart.render("chartContainer");
///監(jiān)聽Loaded事件 判斷是否已經(jīng)加載數(shù)據(jù)
myChart.addEventListener("Loaded", function (evt, args) {
alert(evt.sender.id + "圖表已經(jīng)被加載。");
});

4、FusionCharts API：Rendered（呈現(xiàn)）事件

主要是用于判斷Flash圖表是否已經(jīng)呈現(xiàn)在DIV容器內(nèi)，且已經(jīng)能夠看到Flash圖表的雛形。

var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChart.render("chartContainer");
///監(jiān)聽Rendered事件 判斷是否已經(jīng)呈現(xiàn)于DIV容器內(nèi)
myChart.addEventListener("Rendered", function (evt, args) {
alert(evt.sender.id + "圖表已經(jīng)呈現(xiàn)于DIV容器內(nèi)");
});

5、FusionCharts API：DrawComplete（畫完成）事件

主要用于判斷提供給Flash的數(shù)據(jù)是否完全在圖標(biāo)上得到展現(xiàn)，且全部完成。這個(gè)事件很重要，對(duì)于那些一個(gè)頁面有多個(gè)圖表，且需要一個(gè)個(gè)加載的時(shí)候，就可以使用這個(gè)事件，具體見如下Code中所述。

function DrawChartOne() {
var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChart.render("chartContainer");
//添加監(jiān)聽事件DrawComplete,判斷圖表是否畫完全
myChart.addEventListener("DrawComplete", function () {
alert("圖表1已經(jīng)全部畫完。");
//開始這手加載圖表2
DrawChartTwo();
}
);
}
//加載圖表2
function DrawChartTwo() {
var myChartTwo = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChartTwo.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChartTwo.render("chartContainer");
//添加監(jiān)聽事件DrawComplete,判斷圖表是否畫完全
myChartTwo.addEventListener("DrawComplete", function () {
alert("圖表2已經(jīng)全部畫完。");
//然后這里該干嘛就干嘛
}
);
}
//初始化頁面 加載圖表
$(document).ready(function () {
DrawChartOne();
});

6、FusionCharts API：Resized（縮放）事件

當(dāng)圖表大小(高、寬）值發(fā)生變化的時(shí)候，就會(huì)觸發(fā)此事件。

var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "100%", "100%", "0", "1");
myChart.setXMLData('<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>');
myChart.render("chartContainer");
//監(jiān)聽縮放事件
myChart.addEventListener("Resized", function (evt, args) {
alert(evt.sender.id + "圖表已經(jīng)縮放 從 ( width: " + args.prevWidth + ", height: " + args.prevHeight + ") 到 (width: " + args.width + ", height: " + args.height + ")");
});

7、FusionCharts API：Exported（導(dǎo)出圖表）事件

當(dāng)我們?cè)试S圖表有導(dǎo)出菜單的情況下，導(dǎo)出圖表的時(shí)候，會(huì)提示您是否可以導(dǎo)出。

//監(jiān)聽圖表導(dǎo)出事件
myChart.addEventListener("Exported", function (evt, args) {
alert(args.DOMId + (args.statusCode ? " 圖表已經(jīng)導(dǎo)出" : "圖表不能夠被導(dǎo)出"));
});

8、FusionCharts API：PrintReadyStateChange（準(zhǔn)備好打印）事件

9、FusionCharts API：BeforeLinkedItemOpen（點(diǎn)擊圖表內(nèi)項(xiàng)目）事件

10、FusionCharts API：LinkedItemOpened（點(diǎn)擊圖表內(nèi)項(xiàng)目已經(jīng)響應(yīng)）事件

11、FusionCharts API：BeforeLinkedItemClose（連接打開項(xiàng)目開始關(guān)閉）事件

12、FusionCharts API：LinkedItemClosed（連接打開項(xiàng)目已經(jīng)關(guān)閉）事件

13、FusionCharts API：DataLoadError（圖表數(shù)據(jù)加載錯(cuò)誤）事件

可以便于我們判斷錯(cuò)誤定位位置，數(shù)據(jù)源提供有誤/Flash地址不正確/DIV容器不存在；

14、FusionCharts API：DataXMLInvalid（XML數(shù)據(jù)提供有問題）事件

用于判斷我們提供給FusionCharts圖表的XML數(shù)據(jù)格式存在問題；

var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData("<chart><set lavel='' value='1'></chart>>");
myChart.render("chartContainer");
//用戶判斷XML數(shù)據(jù)格式存在錯(cuò)誤
function FC_DataXMLInvalid(DOMId) {
alert("Invalid XML data error occured in chart having id - " + DOMId);
}

15、FusionCharts API：NoDataToDisplay（沒有數(shù)據(jù)）事件

用于判斷提供給圖表的數(shù)據(jù)沒有。只有一個(gè)空空的chart。

var myChart = new FusionCharts("../../../../Charts/Column3D.swf", "myChartId", "400", "300", "0", "1");
myChart.setXMLData("<chart/>");
myChart.render("chartContainer");
//用戶判斷圖表沒有任何數(shù)據(jù)
function FC_NoDataToDisplay(DOMId) {
alert("沒有人任何數(shù)據(jù)展示在圖表內(nèi)- " + DOMId);
}

16、FusionCharts API：BeforeDispose（圖表即將釋放）事件

FusionCharts.addEventListener(FusionChartsEvents.BeforeDispose, function (identifier, parameter) {
alert(identifier.sender.id + "圖表即將釋放");
});

17、FusionCharts API：Disposed（圖表已經(jīng)釋放）事件

FusionCharts.addEventListener("Disposed", function (identifier, parameter) {
alert(identifier.sender.id + "圖表已經(jīng)釋放掉。");
});