蜜桃传媒视频,宅男福利在线,日韩12页

JavaScript地圖工具FusionMaps在相同頁面集成地圖和圖表

原創|使用教程|編輯：龔雪|2014-04-21 09:39:36.000|閱讀 858 次

概述：本篇將向大家介紹如何把 FusionCharts XT, PowerCharts XT, FusionWidgets XT 的圖表、計量表與FusionMaps XT的地圖集成在同一頁面。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

本篇將向大家介紹如何把 FusionCharts XT, PowerCharts XT, FusionWidgets XT 的圖表、計量表與FusionMaps XT的地圖集成在同一頁面。

本例中，我們將展示一個銷售儀表盤，包括一張世界地圖，一個AngularGauge ，一個3D柱狀圖和一個曲線圖。你可以探究各個地區的收入情況，利潤率，產品和服務總收益分解到每個月的情況，總利潤與上一年相比的結果。效果如下圖：

嵌入圖表和地圖的步驟和在同一頁面嵌入多張地圖差不多：

從各個產品的文件夾內復制所需的 javascript files 并單獨保存到一個文件夾內 (如"JS"). 所需要得JavaScript files:
- FusionCharts.js (from FusionMaps XT pack or from the latest pack you have)
- FusionCharts.HC.js (from FusionMaps XT pack or from the latest pack you have)
- FusionCharts.HC.Maps.js (from FusionMaps XT pack)
- FusionCharts.HC.world.js (from FusionMaps XT pack)
- FusionCharts.HC.Charts.js (from FusionCharts XT pack)
- FusionCharts.HC.PowerCharts.js (from PowerCharts XT pack)
- FusionCharts.HC.Widgets.js (from FusionWidgets XT pack)
- jquery.min.js (from any of the packs)
你可以將圖表和地圖的 SWF files從單獨的packs復制到另一個新建的文件夾或多個文件夾. 所需的 SWF files:
本例中，我們將所有的SWF files復制到一個單獨的文件夾，命名為"SWF"。
- FCMap_World.swf (from FusionMaps XT pack)
- Column3D.swf (from FusionCharts XT pack)
- MSSpline.swf (from PowerCharts XT pack)
- AngularGauge.swf (from FusionWidgets XT pack)
每個地圖和圖表都有唯一的DOM-Id(JavaScript構造函數中指定的)
每個地圖和圖表都用一個單獨的 JavaScript 變量名表示。（如 var worldMap = new FusionCharts (...); var columnChart = new FusionCharts(...);）
每張地圖都應該在單獨的HTML container(DIV, SPAN etc)中渲染，每個container都有獨有的ID。地圖的嵌入代碼必須包含與該地圖的containerID相關聯的名稱
（如 render("worldMapContainer") ; .. render("chartContainerSpline");）

以下為示例代碼：


<html>
<head>
        <title>Creating maps and charts in a single page</title>
                <script type="text/javascript" src="JS/FusionCharts.js"></script>
</head>
        <body>
                <table border="0" cellspacing="5" cellpadding="0">
                        <tr>
                         <td>
                                <div id="worldMapContainer"></div>
                                <script type="text/javascript">
                                 // Uncomment the line below to render JavaScript charts and maps
                                 //FusionCharts.setCurrentRenderer("javascript");
                                 var worldMap = new FusionCharts("SWF/FCMap_World.swf", "Map1Id", "480", "300", "0");
                                 worldMap.setXMLUrl("Data/RegionWiseSales.xml");
                                 worldMap.render("worldMapContainer");
                                </script>
                         </td>
                         <td>
                                <div id="gaugeDiv"></div>
                                <script type="text/javascript">
                                 var ProfitMargin = new FusionCharts("SWF/AngularGauge.swf", "chart1", "300", "155", "0");
                                 ProfitMargin.setXMLUrl("Data/ProfitMargin.xml");
                                 ProfitMargin.render("gaugeDiv");
                                </script>
                         </td>
                        </tr>
                        <tr>
                         <td>
                                <div id="revenueDiv"></div>
                                <script type="text/javascript">
                                 var revenueChart = new FusionCharts("SWF/MSColumn3D.swf", "chart2", "400", "250", "0");
                                 revenueChart.setXMLUrl("Data/Revenue2005.xml");
                                 revenueChart.render("revenueDiv");
                                </script>
                         </td>
                         <td>
                                <div id="chartContainerSpline"></div>
                                <script type="text/javascript">
                                 var salesComparison = new FusionCharts("SWF/MSSpLine.swf", "chart3", "400", "250", "0");
                                 salesComparison.setXMLUrl("Data/SalesComparison.xml");
                                 salesComparison.render("chartContainerSpline");
                                </script>
                         </td>
                        </tr>
                </table>
        </body>
</html>

把不同產品的文件放入不同的文件夾內

除了把各產品所有的JavaScript files和SWF files放在一個文件夾內，還可以把這些文件分別放入不同的文件夾。例如：

FusionCharts.HC.Charts.js and Column3D.swf 放入名為 "Charts"的文件夾
FusionCharts.HC.Widgets.js and AngularGauge.swf放入名為"Widgets"的文件夾
FusionCharts.HC.PowerCharts.js and MSSpline.swf 放入名為 "PowerCharts"的文件夾
FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Maps.js, jquery.min.js, FusionCharts.HC.world.js and FCMap_World.swf 放入名為 "Maps"的文件夾
文件夾"Charts", "Widgets", "PowerCharts" 及 "Maps" 放進同一個文件夾。

注意：

你需要提供正確的 SWF files路徑。SWF files路徑應該與網頁和HTML file相關。
更重要的是，你需要聲明每個產品路徑具體的 JavaScript模塊。
- FusionCharts.options.html5ChartsSrc property to set the path for FusionCharts.HC.Charts.js ( FusionCharts XT JavaScript module)
- FusionCharts.options.html5WidgetsSrc property to set the path for FusionCharts.HC.Widgets.js ( FusionWidgets XT JavaScript module)
- FusionCharts.options.html5PowerChartsSrc property to set the path for FusionCharts.HC.PowerCharts.js ( PowerCharts XT JavaScript module)
- FusionCharts.options.html5MapsSrc property to set the path for FusionCharts.HC.Maps.js ( FusionMaps XT JavaScript module)

Note: JavaScript模塊的路徑應當總是與FusionCharts.js的路徑相關，但不與網頁或HTML file.的路徑相關。

如此一來，代碼便是：


<html>
<head>
        <title>Creating maps and charts in a single page</title>
                <script type="text/javascript" src="Maps/FusionCharts.js"></script>
                <script type="text/javascript">
                                FusionCharts.options.html5WidgetsSrc = "../Widgets/FusionCharts.HC.Widgets.js";
                                FusionCharts.options.html5ChartsSrc = "../Charts/FusionCharts.HC.Charts.js";
                                FusionCharts.options.html5PowerChartsSrc = "../PowerCharts/FusionCharts.HC.PowerCharts.js";
                        
                </script>
</head>
        <body>
                <table border="0" cellspacing="5" cellpadding="0">
                        <tr>
                         <td>
                                <div id="worldMapContainer"></div>
                                <script type="text/javascript">
                                 // Uncomment the line below to render JavaScript charts and maps
                                 //FusionCharts.setCurrentRenderer("javascript");
                                 var worldMap = new FusionCharts("Maps/FCMap_World.swf", "Map1Id", "480", "300");
                                 worldMap.setXMLUrl("Data/RegionWiseSales.xml");
                                 worldMap.render("worldMapContainer");
                                </script>
                         </td>
                         <td>
                                <div id="gaugeDiv"></div>
                                <script type="text/javascript">
                                 var ProfitMargin = new FusionCharts("Widgets/AngularGauge.swf", "chart1", "300", "155");
                                 ProfitMargin.setXMLUrl("Data/ProfitMargin.xml");
                                 ProfitMargin.render("chart1");
                                </script>
                         </td>
                        </tr>
                        <tr>
                         <td>
                                <div id="revenueDiv"></div>
                                <script type="text/javascript">
                                 var revenueChart = new FusionCharts("Charts/MSColumn3D.swf", "chart2", "400", "250", "0");
                                 revenueChart.setXMLUrl("Data/Revenue2005.xml");
                                 revenueChart.render("revenueDiv");
                                </script>
                         </td>
                         <td>
                                <div id="chartContainerSpline"></div>
                                <script type="text/javascript">
                                 var salesComparison = new FusionCharts("PowerCharts/MSSpLine.swf", "chart3", "400", "250", "0");
                                 salesComparison.setXMLUrl("Data/SalesComparison.xml");
                                 salesComparison.render("chartContainerSpline");
                                </script>
                         </td>
                        </tr>
                </table>
        </body>
</html>

在以上代碼中，我們已經使用如下屬性聲明了所有JavaScript 模塊文件的相對路徑：

FusionCharts.options.html5WidgetsSrc = "../Widgets/FusionCharts.HC.Widgets.js"
FusionCharts.options.html5ChartsSrc = "../Charts/FusionCharts.HC.Charts.js"
FusionCharts.options.html5PowerChartsSrc = "../PowerCharts/FusionCharts.HC.PowerCharts.js"

重要提示：上述屬性在渲染頁面上的任何圖表、計量表或地圖之前都需要明確。保險起見，我們在把FusionCharts.js包含在HTML頁面后馬上聲明。

注意：在上述例子中，我們沒有明確定義FusionCharts.HC.Maps.js 路徑，因為該文件和FusionCharts.js在同一文件夾中。這樣一來FusionCharts.js就在同一個地址自動加載了。

標簽：JavaScript HTML5 圖表數據可視化地圖 FusionMaps

本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn

文章轉載自：慧都控件網

上一篇：FusionCharts使用教程：LinkedCharts實現無限層級向下鉆取下一篇：IntelliJ IDEA最新快捷鍵大全（Windows/Linux版）