今天無意中看到一個(gè)利用Flash生成chart圖的工具:amCharts,我一開始就覺得這些chart圖非常眼熟,它的顯示樣式跟監(jiān)控寶的是完全一樣的,我通過查看網(wǎng)頁的源文件,才知道原來監(jiān)控寶就是用的這套畫圖組件。
amCharts分為四類chart圖:Flash charts、Flex charts、WPF&Silverlight charts和Flash maps,可見其能生成的chart圖是非常豐富多樣的。
Flash charts
曲線圖
餅狀圖
柱狀圖
Flash maps
地域分布統(tǒng)計(jì)圖
amCharts完全免費(fèi),使用很簡單,完全不需要懂任何的編程語言,我們只需要畫葫蘆照搬三個(gè)步驟即可:
1、根據(jù)它提供的xml樣板文件,編輯數(shù)據(jù),這是Flash charts圖的數(shù)據(jù)源,格式非常的簡單。
2、調(diào)用amCharts提供的SWFObject.js文件,如:
<script type="text/javascript" src="/amline_1.6.3.0/amline/SWFObject.js"></script>
3、在網(wǎng)頁里調(diào)用Flash控件,如:
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/lib/ampie/ampie.swf?cache=0", "ampie", "640", "420", "8", "#FFFFFF");
so.addVariable("path", "/lib/files/")
so.addVariable("settings_file", escape("/lib/ampie/settings/2d-pie-chart.xml"));
so.addVariable('data_file', escape('/lib/ampie/data/2d-pie-chart.txt'));
so.addVariable("preloader_color", "#999999");
so.addParam("wmode", "opaque");
so.write("flashcontent");
// ]]>
</script>
控件里的數(shù)據(jù)根據(jù)需要而改變。
amCharts官方地址:http://www.amCharts.com,官網(wǎng)上有更加詳細(xì)的教程和范例,并可以下載最新版本。