岛国免费,91tv成人,a级毛片在线观

老司机夜插-理伦理片-理伦片免费-理伦片免费观看-理伦片免费看-理伦日韩-理论福利片-理论片第一页-理论片电影-理论片理论

JavaScript地圖工具FusionMaps在相同頁(yè)面集成地圖和圖表

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

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

# 界面/圖表報(bào)表/文檔/IDE等千款熱門(mén)軟控件火熱銷(xiāo)售中 >>

相關(guān)鏈接：

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

本例中，我們將展示一個(gè)銷(xiāo)售儀表盤(pán)，包括一張世界地圖，一個(gè)AngularGauge ，一個(gè)3D柱狀圖和一個(gè) 曲線圖。你可以探究各個(gè)地區(qū)的收入情況，利潤(rùn)率，產(chǎn)品和服務(wù)總收益分解到每個(gè)月的情況，總利潤(rùn)與上一年相比的結(jié)果。效果如下圖：

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

從各個(gè)產(chǎn)品的文件夾內(nèi)復(fù)制所需的 javascript files 并單獨(dú)保存到一個(gè)文件夾內(nèi) (如"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從單獨(dú)的packs復(fù)制到另一個(gè)新建的文件夾或多個(gè)文件夾. 所需的 SWF files:
本例中，我們將所有的SWF files復(fù)制到一個(gè)單獨(dú)的文件夾，命名為"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)
每個(gè)地圖和圖表都有唯一的DOM-Id(JavaScript構(gòu)造函數(shù)中指定的)
每個(gè)地圖和圖表都用一個(gè)單獨(dú)的 JavaScript 變量名表示。（如 var worldMap = new FusionCharts (...); var columnChart = new FusionCharts(...);）
每張地圖都應(yīng)該在單獨(dú)的HTML container(DIV, SPAN etc)中渲染，每個(gè)container都有獨(dú)有的ID。地圖的嵌入代碼必須包含與該地圖的containerID相關(guān)聯(lián)的名稱(chēng)
（如 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>

把不同產(chǎn)品的文件放入不同的文件夾內(nèi)

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

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" 放進(jìn)同一個(gè)文件夾。

注意：

你需要提供正確的 SWF files路徑。SWF files路徑應(yīng)該與網(wǎng)頁(yè)和HTML file相關(guān)。
更重要的是，你需要聲明每個(gè)產(chǎn)品路徑具體的 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模塊的路徑應(yīng)當(dāng)總是與FusionCharts.js的路徑相關(guān)，但不與網(wǎng)頁(yè)或HTML file.的路徑相關(guān)。

如此一來(lái)，代碼便是：


<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>

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

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

重要提示：上述屬性在渲染頁(yè)面上的任何圖表、計(jì)量表或地圖之前都需要明確。保險(xiǎn)起見(jiàn)，我們?cè)诎袴usionCharts.js包含在HTML頁(yè)面后馬上聲明。

注意：在上述例子中，我們沒(méi)有明確定義FusionCharts.HC.Maps.js 路徑，因?yàn)樵撐募虵usionCharts.js在同一文件夾中。這樣一來(lái)FusionCharts.js就在同一個(gè)地址自動(dòng)加載了。

標(biāo)簽：JavaScript HTML5 圖表數(shù)據(jù)可視化地圖 FusionMaps

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn

文章轉(zhuǎn)載自：慧都控件網(wǎng)

上一篇：FusionCharts使用教程：LinkedCharts實(shí)現(xiàn)無(wú)限層級(jí)向下鉆取下一篇：IntelliJ IDEA最新快捷鍵大全（Windows/Linux版）