JavaScript图表工具FusionCharts Suite XT入门教程(三):创建地图

翻译|使用教程|编辑:吴园园|2019-09-26 10:14:30.553|阅读 47 次

概述:本篇教程将为您介绍如何使用Plain JavaScript渲染地图。

相关链接:

FusionCharts Suite XT是全面的跨平台、跨浏览器JavaScript图表套包,其中包括FusionCharts XT、PowerCharts XT 、FusionWidgets XT 、FusionMaps XT。支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。

FusionCharts Suite XT现已更新至3.14.0-sr.1版本,FusionCharts Angular包装器现在与Angular 8兼容并修复了一些bug。

点击下载FusionCharts Suite XT最新试用版

创建你的第一个地图

在本节中,我们将使用世界地图创建一个可视化图表,以显示平均每年人口增长。

JavaScript图表工具FusionCharts Suite XT入门教程(三):创建地图

地图数据

下表中显示了以上地图的数据:

实体名称

北美

NA

82

南美洲

SA

2.04

亚洲

AS

1.78

欧洲

欧盟

40

非洲

AF

2.58

澳大利亚

AU

1.30

在上表中,“ 实体名称 ”列表示地图中表示的地理实体,其全名在“ 状态”列中给出。

FusionCharts接受JSON格式的数据,其中上述实体由对象中的id键表示data。

对于任何地图可视化,重要的是要为id按键提供正确的值。例如,如果要表示非洲,则对应的值id必须为AF而不是AFR。

我们为可使用FusionCharts渲染的所有地图提供了详细的地图规格表,您可以在其中找到id要创建的正确地图。

以下代码是上面表格的JSON表示形式,具有呈现上面地图所需的属性。

{ 
   // Map Configuration 
   "chart": 
           { "caption": "Average Annual Population Growth", 
           "subcaption": " 1955-2015", 
           "numbersuffix": "%", 
           "includevalueinlabels": "1", 
           "labelsepchar": ": ", 
           "entityFillHoverColor": "#FFF9C4", 
           "theme": "fusion" 
     }, 
     // Aesthetics; ranges synced with the slider 
     "colorrange": { 
          "minvalue": "0", 
          "code": "#FFE0B2", 
          "gradient": "1", 
          "color": [{ 
               "minvalue": "0.5", 
               "maxvalue": "1.0", 
               "color": "#FFD74D" 
            }, { 
               "minvalue": "1.0", 
               "maxvalue": "2.0", 
               "color": "#FB8C00" 
            }, { 
               "minvalue": "2.0", 
               "maxvalue": "3.0", 
               "color": "#E65100" 
            }] 
      }, 
     // Source data as JSON --> id represents countries of world. 
     "data": [{ 
        "id": "NA", 
        "value": ".82", 
        "showLabel": "1" 
     }, { 
        "id": "SA", 
        "value": "2.04", 
        "showLabel": "1" 
     }, { 
        "id": "AS", 
        "value": "1.78", 
        "showLabel": "1" 
     }, { 
        "id": "EU", 
        "value": ".40", 
        "showLabel": "1" 
     }, { 
        "id": "AF", 
        "value": "2.58", 
        "showLabel": "1" 
     }, { 
        "id": "AU", 
        "value": "1.30", 
        "showLabel": "1" 
     }] 
}

在上面的JSON数据中:

  • 创建chart对象以定义地图的元素。

  • 创建colorRange数组以设置与特定值范围关联的颜色。

  • 指定minValue并maxValue在color数组下的colorRange数组内。

  • 创建data数组以定义各大洲的ID及其对应的值以及配置。例如,根据第一对象data数组包含id和value的北美为NA和0.82分别。

图表对象和相应的数组包含一组称为属性的键值对。这些属性用于设置地图的功能和外观属性。

现在您已经拥有JSON格式的数据,现在让我们渲染地图。

呈现地图

要渲染地图,请执行以下步骤:

1、包括fusioncharts库。

2、包括FusionMaps渲染器。

3、包括地图定义文件。

4、包括FusionCharts主题文件,以将样式应用于图表。

5、将地图渲染器和地图定义添加为对核心的依赖。

6、将主题作为依赖项添加到核心。

7、将图表配置存储为JSON对象。在此JSON对象中:

  • 将地图类型设置为world。每个地图都以唯一的地图别名表示。对于世界地图,别名为world。

  • 设置宽度和高度(以像素为单位)。

  • 设置dataFormat为json。

  • 将json数据嵌入为的值dataSource。

8、为图表添加一个容器(实例)。

    My First map using FusionCharts Suite XT    
        
        
        
         id represents countries of world.
                    "data": [{
                        "id": "NA",
                        "value": ".82",
                        "showLabel": "1"
                    }, {
                        "id": "SA",
                        "value": "2.04",
                        "showLabel": "1"
                    }, {
                        "id": "AS",
                        "value": "1.78",
                        "showLabel": "1"
                    }, {
                        "id": "EU",
                        "value": ".40",
                        "showLabel": "1"
                    }, {
                        "id": "AF",
                        "value": "2.58",
                        "showLabel": "1"
                    }, {
                        "id": "AU",
                        "value": "1.30",
                        "showLabel": "1"
                    }]
                }
            });
            annualPopulation.render();
        });
    " _ue_custom_node_="true">FusionMaps XT will load map here!

现在您的第一个使用Plain JavaScript的地图已准备就绪。

渲染其他地图

为了减小包装的尺寸,FusionCharts仅随附两张地图,即世界地图和美国地图。但是,FusionCharts提供了1600多种地图供您浏览。如果要保存在本地,请分别下载地图文件。

让我们创建一个加利福尼亚地图,以显示“特定月份的网络访问量”,如下所示:

JavaScript图表工具FusionCharts Suite XT入门教程(三):创建地图

要渲染上面的地图,请先安装fusionmaps包含所有地图定义文件的软件包,如下所示:

$ npm install fusionmaps

安装fusionmaps软件包后,呈现加利福尼亚地图的代码为:

要使用1600多种地图中的任何其他地图(世界和美国除外),请下载地图定义文件,然后将这些地图文件复制到当前地图文件夹中。
地图定义文件以以下fusioncharts.[MAP_ALIAS].js格式命名,其中MAP_ALIAS代表国家,州或地区名称。

 <html><head>
    <!-- Including the fusioncharts core library -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    <!-- Including the map renderer file -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.maps.js "></script>
    <!-- Including the map definition file -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/maps/fusioncharts.california.js"></script>
    <!-- Including the fusion theme -->
    <script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script><script type="text/javascript">const webVisit = {
    type: 'maps/california',
    renderAt: 'chart-container',
    width: '800',
    height: '550',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "animation": "0",
            "showbevel": "0",
            "usehovercolor": "1",
            "showlegend": "1",
            "legendposition": "BOTTOM",
            "legendborderalpha": "0",
            "legendbordercolor": "ffffff",
            "legendallowdrag": "0",
            "legendshadow": "0",
            "caption": "Website Visits for the month of March 2018",
            "connectorcolor": "000000",
            "fillalpha": "80",
            "hovercolor": "CCCCCC",
            "theme": "fusion"
        },
        "colorrange": {
            "minvalue": "0",
            "startlabel": "Low",
            "endlabel": "High",
            "code": "e44a00",
            "gradient": "1",
            "color": [{"maxvalue": "2500", "code": "f8bd19"}, {"maxvalue": "5000", "code": "6baa01"}]
        },
        "data": [{"id":"001","value":2834},{"id":"003","value":3182},{"id":"005","value":3280},{"id":"007","value":911},{"id":"009","value":292},{"id":"011","value":530},{"id":"013","value":2515},{"id":"015","value":728},{"id":"017","value":1974},{"id":"019","value":848},{"id":"021","value":3278},{"id":"023","value":4463},{"id":"025","value":1198},{"id":"027","value":378},{"id":"029","value":2610},{"id":"031","value":1200},{"id":"033","value":3820},{"id":"035","value":940},{"id":"037","value":3416},{"id":"039","value":4004},{"id":"041","value":1604},{"id":"043","value":4011},{"id":"045","value":3203},{"id":"047","value":3775},{"id":"049","value":2721},{"id":"051","value":3417},{"id":"053","value":1530},{"id":"055","value":412},{"id":"057","value":3434},{"id":"059","value":1670},{"id":"061","value":1274},{"id":"063","value":4339},{"id":"065","value":2073},{"id":"067","value":1018},{"id":"069","value":3967},{"id":"071","value":3401},{"id":"073","value":3307},{"id":"075","value":1938},{"id":"077","value":489},{"id":"079","value":3207},{"id":"081","value":2295},{"id":"083","value":2747},{"id":"085","value":1114},{"id":"087","value":3400},{"id":"089","value":784},{"id":"091","value":1673},{"id":"093","value":4274},{"id":"095","value":4509},{"id":"097","value":3862},{"id":"099","value":1356},{"id":"101","value":4126},{"id":"103","value":1314},{"id":"105","value":1807},{"id":"107","value":4026},{"id":"109","value":3456},{"id":"111","value":1393},{"id":"113","value":1500},{"id":"115","value":2218}]
    }};// RenderwebVisit.render();</script></head></html>

呈现图表时遇到问题?

如果出现错误,并且您看不到图表,请检查以下内容:

  • 如果页面上出现JavaScript错误,请检查浏览器控制台中的确切错误并进行相应修复。

  • 如果该图表完全没有显示,但是没有JavaScript错误,请检查FusionCharts Suite XT JavaScript库是否正确加载。您可以在浏览器中使用开发人员工具查看是否fusioncharts.js已加载。

  • 如果收到“ 正在加载数据”或“ 在加载数据时出错”消息,请检查JSON数据结构是否正确,或代码中与引号相关的冲突。

=====================================================

想要了解或购买FusionCharts Suite XT正版授权的朋友欢迎咨询慧都官方在线客服

关注“慧聚IT”微信公众号,及时获取产品最新消息和最新资讯

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:FusionCharts Suite XT https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-map-using-plain-javascript

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
FusionCharts Suite XT

全面的跨平台、跨浏览器JavaScript图表解决方案套包,拥有90+图表和900+地图

FusionCharts XT

50万用户首选的跨平台、跨浏览器的JavaScript/HTML图表解决方案

FusionWidgets XT

FusionWidgets XT操作简单,提供各种实时图表、金融图表、支持图表自动更新

PowerCharts XT

适用于专业领域的高级图表控件

FusionMaps XT

功能强大的JavaScript (HTML5)地图工具,可以根据内容、地区来展现及描绘地理数据或者其它实体。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat