FusionCharts for Flex 如何更改图表数据

FusionCharts allows to change chart data and re-render the chart, after it has loaded on the user’s computer. This is possible with the help of methods, which are attached to each FusionCharts object.

In the following demonstrative example, we will change the data source of a chart when the chart is clicked upon. The XML code (below) dynamically changes the data source of the FusionCharts object.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"

 xmlns:components="com.fusioncharts.components.*" initialize="initApp()">



  <components:FusionCharts id="FC1" x="10" y="10" FCChartType="Column3D" width="500" height="300" FCDataURL="Data.xml" />



        <fx:Script>

                <![CDATA[



                        import com.events.FCEvent;

                        import mx.collections.ArrayCollection;

                        import mx.controls.Alert;



                        private function initApp():void {

                                FC1.addEventListener("FCClickEvent",clicked);

                        }



                        private function clicked(e:FCEvent):void {

                                FC1.FCData(city_data);

                                FC1.FCParams(city_params);

                                FC1.FCRender(); 

                        }



                        // Providing chart data as ArrayCollection to chart

                        [Bindable]

                        private var city_data:ArrayCollection = new ArrayCollection([

                                {label:'USA',value:'96000', link:'S-USA'},//注意 S- 是一个前缀标志 后边的内容可以在点击的时候获取到

                                {label:'Germany',value:'90000', link:'S-Germany'},

                                {label:'Austria',value:'58000', link:'S-Austria'},

                                {label:'Brazil',value:'50000', link:'S-Brazil'},

                                {label:'UK',value:'28000', link:'S-UK'},

                                {label:'Sweden',value:'25000', link:'S-Sweden'}

                        ]);



                        // Providing chart parameters as ArrayCollection to chart

                        [Bindable]

                        private var city_params:ArrayCollection=new ArrayCollection([

                                {caption:"Sales by Country"},

                                {subcaption:"(Click country item for details)"},

                                {numberPrefix:"$"},

                                {showValues:"0"}

                        ]);



                ]]>

        </fx:Script>



</s:Application> 

In the above code we doen the following:

Initially, we bind the event listener clicked to the click event of the FusionCharts file. 

FC1.addEventListener("FCClickEvent",clicked);

The clicked method calls upon FCData, FCParams and FCRender of the FusionCharts object to perform the various functions. The data is set using the following method. 

FC1.FCData( city_data );

Here city_data is an ArrayCollection object, which contains the datasets. The parameters are passed in the following manner:

FC1.FCParams(city_params); 

Similarly, city_params is an ArrayCollection object containing the list of parameters.

Finally, FCRender method is called to render the chart.

FC1.FCRender();