Fusioncharts图表组件事件API汇总

最新推荐文章于 2014-05-16 10:51:00 发布

转载最新推荐文章于 2014-05-16 10:51:00 发布 · 1.4k 阅读

本文详细介绍了Fusioncharts图表组件中的关键事件API及其应用场景，包括初始化、数据更新、数据加载、呈现等事件，帮助开发者更好地掌握图表加载及交互过程。

[ 摘要]：我们在使用Fusioncharts图表组件的时候，需要一些事件监听来帮助我们了解Flash加载图表数据的情况是怎么样的，特此总结了一下相关的事件API如下所示： 1、API：Initialize（初始化）事件作用：提示用户Fusioncharts图表组件相关的Flash和JS文件等等是否准备就绪，能够创建Fusioncharts图表对象。 Code： ///添加初始化完成的事件Initialized FusionCharts.addEventListener('Initialized', function (identifier, parameter) { alert(identifier.sender.id + "图表已经初始化完成"); }); va...

我们在使用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('<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>');
   
    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('<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>');
   
    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('<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>');
   
    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('<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>');
   
    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('<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>');
   
    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('<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>');
   
    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("<chart><set lavel='' value='1'></chart>>");
   
    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("<chart/>");
   
    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