原創(chuàng)|其它|編輯:郝浩|2012-11-15 13:21:07.000|閱讀 2519 次
概述:本文詳細解析如何加載多個FusionCharts圖表文件到flash應用程序中
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
要在flash動畫中加載兩個或多個 FusionCharts 圖表文件,只需為每個圖表類創(chuàng)建一個實例,提供相應的XML數(shù)據(jù)然后將它呈現(xiàn)出來就可以了,非常簡單。
在本例中,我們在FlashExamples文件夾下創(chuàng)建MultipleCharts.fla,然后再在這個新創(chuàng)建的文件夾下創(chuàng)建一層 "Graphic Elements",添加兩個圓角矩形的背景框,用來加載兩個圖表,如圖所示:
示例代碼:
//You first need to include the following two files in your movie. //These two files contain pre-loading functions and application //messages for the chart. //Note: If you're loading multiple charts in your Flash movie, you //do NOT need to include these files for each chart. You can put these //lines in the main timeline, so that it gets loaded only once. #include "com/fusioncharts/includes/LoadingFunctions.as" #include "com/fusioncharts/includes/AppMessages.as" //To create the chart, you now need to import the Class of the //chart which you want to create. All charts are present in the package //com.fusioncharts.core.charts (Download Package > SourceCode folder) //If you're using multiple charts, you can import all the requisite //chart classes in the main timeline of your movie. That way, you //will not have to import the chart classes everytime you wish to use. import com.fusioncharts.core.charts.Column2DChart; import com.fusioncharts.core.charts.Line2DChart; // ------------- XML Data for the charts -------------- // //Data for chart 1 var strXML1:String = "<chart showBorder='0' bgAlpha='0,0' palette='1' caption='Hourly Working Rate' numberPrefix='$'>"; //Add simple data for demo. strXML1 = strXML1+"<set label='John' value='32' />"; strXML1 = strXML1+"<set label='Mary' value='65' />"; strXML1 = strXML1+"<set label='Michelle' value='29' />"; strXML1 = strXML1+"<set label='Cary' value='43' />"; strXML1 = strXML1+"</chart>"; var xmlData1:XML = new XML(strXML1); // Data for Chart 2 var strXML2:String = "<chart showBorder='0' bgAlpha='0,0' palette='1' caption='Hours Worked Last week' canvasPadding='20'>"; //Add simple data for demo. strXML2 = strXML2+"<set label='John' value='49' />"; strXML2 = strXML2+"<set label='Mary' value='34' />"; strXML2 = strXML2+"<set label='Michelle' value='61' />"; strXML2 = strXML2+"<set label='Cary' value='40' />"; strXML2 = strXML2+"</chart>"; var xmlData2:XML = new XML(strXML2); // --------------------------------------------------- // // -------------- Actual Code to create the chart ------------// //Create movie clips required for both the charts var chartContainer1MC:MovieClip = this.createEmptyMovieClip("ChartHolder1", 1); var chartContainer2MC:MovieClip = this.createEmptyMovieClip("ChartHolder2", 2); //Now, instantiate the charts using Constructor function of the chart. var chart1:Column2DChart = new Column2DChart(chartContainer1MC, 1, 380, 325, 20, 15, false, "EN", "noScale"); var chart2:Line2DChart = new Line2DChart(chartContainer2MC, 1, 380, 325, 440, 15, false, "EN", "noScale"); //Convey the XML data to chart. chart1.setXMLData(xmlData1); chart2.setXMLData(xmlData2); //Draw the charts chart1.render(); chart2.render(); //Stop stop();
解釋一下上面的代碼:
1、首先加進了com/fusioncharts/includes/LoadingFunctions.as & com/fusioncharts/includes/AppMessages.as ,預加載圖表所需的文件;
2、然后,我們要繪制兩個圖表,所以導入Column2DChart 類和Line2DChart 類;
3、為兩個圖表創(chuàng)建XML數(shù)據(jù)(在此例中,是硬編碼的XML數(shù)據(jù)),你也可以根據(jù)數(shù)據(jù)源動態(tài)創(chuàng)建XML數(shù)據(jù);
4、將XML數(shù)據(jù)轉換為XML對象;
5、然后為兩個圖表分別創(chuàng)建兩個空的動畫片段;
6、為兩個圖表創(chuàng)建實例以及所需的參數(shù)。設置x和y軸平移線以便在柱狀圖右邊繪制;
7、用setXMLData 傳遞XML數(shù)據(jù);
8、最后,向每個圖表的實例對象調用 render() 方法,繪制兩個圖表。
查看應用程序,輸出效果如下圖:
在本例中,我們只加載了2D柱狀圖和線形圖,你也可以加載FusionCharts的其他圖表類型。另外,你還可以加載任意數(shù)量的圖表到你的應用程序中。
本站文章除注明轉載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件