FusionCharts使用教程：事件API總結

---

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

提示用戶FusionCharts圖表組件相關的Flash和JS文件等等是否準備就緒，能夠創建FusionCharts圖表對象。

///添加初始化完成的事件Initialized
FusionCharts.addEventListener('Initialized', function (identifier, parameter) {
alert(identifier.sender.id + "圖表已經初始化完成");
});
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（數據更新）事件

主要是監聽圖表組件有數據加載的時候就會提示這個信息。

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

3、FusionCharts API：Loaded（數據加載）事件

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

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");
///監聽Loaded事件 判斷是否已經加載數據
myChart.addEventListener("Loaded", function (evt, args) {
alert(evt.sender.id + "圖表已經被加載。");
});

4、FusionCharts API：Rendered（呈現）事件

主要是用于判斷Flash圖表是否已經呈現在DIV容器內，且已經能夠看到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");
///監聽Rendered事件 判斷是否已經呈現于DIV容器內
myChart.addEventListener("Rendered", function (evt, args) {
alert(evt.sender.id + "圖表已經呈現于DIV容器內");
});

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

主要用于判斷提供給Flash的數據是否完全在圖標上得到展現，且全部完成。這個事件很重要，對于那些一個頁面有多個圖表，且需要一個個加載的時候，就可以使用這個事件，具體見如下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");
//添加監聽事件DrawComplete,判斷圖表是否畫完全
myChart.addEventListener("DrawComplete", function () {
alert("圖表1已經全部畫完。");
//開始這手加載圖表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");
//添加監聽事件DrawComplete,判斷圖表是否畫完全
myChartTwo.addEventListener("DrawComplete", function () {
alert("圖表2已經全部畫完。");
//然后這里該干嘛就干嘛
}
);
}
//初始化頁面 加載圖表
$(document).ready(function () {
DrawChartOne();
});

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

當圖表大小(高、寬）值發生變化的時候，就會觸發此事件。

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");
//監聽縮放事件
myChart.addEventListener("Resized", function (evt, args) {
alert(evt.sender.id + "圖表已經縮放 從 ( width: " + args.prevWidth + ", height: " + args.prevHeight + ") 到 (width: " + args.width + ", height: " + args.height + ")");
});

7、FusionCharts API：Exported（導出圖表）事件

當我們允許圖表有導出菜單的情況下，導出圖表的時候，會提示您是否可以導出。

//監聽圖表導出事件
myChart.addEventListener("Exported", function (evt, args) {
alert(args.DOMId + (args.statusCode ? " 圖表已經導出" : "圖表不能夠被導出"));
});

8、FusionCharts API：PrintReadyStateChange（準備好打印）事件

9、FusionCharts API：BeforeLinkedItemOpen（點擊圖表內項目）事件

10、FusionCharts API：LinkedItemOpened（點擊圖表內項目已經響應）事件

11、FusionCharts API：BeforeLinkedItemClose（連接打開項目開始關閉）事件

12、FusionCharts API：LinkedItemClosed（連接打開項目已經關閉）事件

13、FusionCharts API：DataLoadError（圖表數據加載錯誤）事件

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

14、FusionCharts API：DataXMLInvalid（XML數據提供有問題）事件

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

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

15、FusionCharts API：NoDataToDisplay（沒有數據）事件

用于判斷提供給圖表的數據沒有。只有一個空空的chart。

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

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

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

17、FusionCharts API：Disposed（圖表已經釋放）事件

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