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 + "图表已经释放掉。");
});