JavaScript地图工具FusionMaps在相同页面集成地图和图表-控件新闻-慧都网

JavaScript地图工具FusionMaps在相同页面集成地图和图表

原创|使用教程|编辑：龚雪|2014-04-21 09:39:36.000|阅读 869 次

概述：本篇将向大家介绍如何把 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@ke049m.cn

文章转载自：慧都控件网

上一篇：FusionCharts使用教程：LinkedCharts实现无限层级向下钻取下一篇：IntelliJ IDEA最新快捷键大全（Windows/Linux版）