原創|其它|編輯:郝浩|2012-11-12 13:27:19.000|閱讀 1365 次
概述:AnyChart 是一款靈活的基于Flash/JavaScript (HTML5) 的圖表控件,可在網頁上創建豐富的圖表和地圖類型,本教程將一步步為你講解如何運用AnyChart創建flash地圖。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
AnyChart 是一款靈活的基于Flash/JavaScript (HTML5) 的圖表控件,可在網頁上創建豐富的圖表和地圖類型,本教程將一步步為你講解如何運用AnyChart創建flash地圖。
首先需要一個普通的包含Flash對象的HTML頁面,把它放在網站的某些文件夾里。在IIS wwwroot 文件夾中創建AnyChartTest 文件夾,結構如下:
/AnyChartTest
/swf
AnyChart.swf
states.amap
/js
AnyChart.js
anychart.xml
anychart.html
地圖數據需包含一個XML文件,它決定地圖將如何顯示,顯示什么地圖等。假設我們要顯示一張彩色的USA地圖。這個地圖存儲在states.amap文件中(amap文件是AnyChart存儲地圖數據的專有格式)。
要顯示地圖,首先創建XML設置文件,示例代碼如下:
<?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart plot_type="Map"> <chart_settings> <title> <text>USA Map</text> </title> </chart_settings> <data_plot_settings> <map_series source="states.amap"> <projection type="mercator" /> <undefined_map_region palette="default"> <label_settings enabled="True" /> </undefined_map_region> </map_series> </data_plot_settings> </chart> </charts> </anychart>
打開AnyChartTest文件夾中的anychart.xml,并將上面這段代碼粘貼進去。
設置地圖標題文本:
<title> <text>USA Map</text> </title>
將 "states.amap"文件設置為地圖源:
<map_series source="states.amap" />
將地圖對象設置為Mercator,設置各大州的顏色,啟用所有區域的標簽:
<map_series source="states.amap"> <projection type="mercator" /> <undefined_map_region palette="default"> <label_settings enabled="True" /> </undefined_map_region> </map_series>
將以下代碼復制粘貼到anychart.html:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>AnyChart Sample Flash Map </title> <script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script> </head> <body> <script type="text/javascript" language="javascript"> //<![CDATA[ var chart = new AnyChart( './swf/AnyChart.swf'); chart.width = 600; chart.height = 450; chart.setXMLFile('./anychart.xml'); chart.write(); //]]> </script> </body> </html>
在Web瀏覽器中啟動html頁面,有兩種方式:
//localhost/AnyChartTest/anychart.html
或
C:\Inetpub\wwwroot\AnyChartTest\anychart.html
效果如下:
本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自:慧都控件