FusionCharts使用教程：事件API總結

一、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");

二、FusionCharts API：DataUpdated（數據更新）事件

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

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

三、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 + "圖表已經被加載。");
});

四、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容器內");
});

五、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();
});

六、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 + ")");
});

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

當咱們容許圖表有導出菜單的狀況下，導出圖表的時候，會提示您是否能夠導出。

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

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

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

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

十一、FusionCharts API：BeforeLinkedItemClose（鏈接打開項目開始關閉）事件

十二、FusionCharts API：LinkedItemClosed（鏈接打開項目已經關閉）事件

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

能夠便於咱們判斷錯誤定位位置，數據源提供有誤/Flash地址不正確/DIV容器不存在；

1四、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);
}

1五、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);
}

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

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

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

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