如何将Highmaps和Highcharts与Meteor一起使用

我正在应用程序中使用 highcharts:highcharts-meteor 包。我在配置中添加了高地图。我的高图表配置对象如下：

{
  "version": "4.2.1",        // Choose version of Highcharts/Highstock/Highmaps.
  "base": "highcharts.js",  // Choose base, can be "highcharts.js", "highstock.js" or "highmaps.js"
  "adapter": "jquery",      // Choose adapter, e.g. "jquery" or "standalone-framework.js".
  "modules": [              // Choose modules to be installed altogether with main library.
    "highcharts-3d.src.js",
    "modules/exporting.js",
    "modules/heatmap.js",
    "modules/maps.js",
    "modules/drilldown.js",
    "themes/gray.js"
  ]
}

我添加了地图.js以便能够同时使用高图和高图。我正在尝试渲染示例演示地图"美国人口密度"，但没有任何运气。我不确定正确的配置选项是什么，以及我应该将 us-all.js 文件放在我的目录中的什么位置。

我在浏览器控制台中遇到的错误是

无法将属性"国家/我们/我们所有人"设置为未定义

下面来自Highcharts演示站点的JSFiddle。

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/color-axis/

所以highcharts.Map是不确定的。我尝试了多种方法：

将"配置基础"选项更改为"高地图.js
删除模块/映射.js
将我们所有人.js放入兼容性目录

同样的问题。我做错了什么？

错误：

高图表。地图未定义

发生，因为您正在包含modules/maps.js但找不到此文件。要包含的模块名为 map.js 。此文件位于目录 /packages/highcharts-container/.npm/package/node_modules/highcharts/modules/ 中。

如果要在 Meteor 中实现 Highcharts Maps 演示，请按照以下七个步骤操作：

运行命令meteor add highcharts:highcharts-meteor 。
运行meteor以初始化highcharts-container。
打开文件/client/config.highcharts.json并插入以下高图表配置：

{
  "version": "4.2.1",
  "base": "highcharts.js",
  "adapter": "default",
  "modules": [
    "highmaps.js",
    "modules/exporting.js",
    "modules/heatmap.js",
    "modules/drilldown.js",
    "modules/map.js",
    "themes/gray.js"
  ]
}

在您的 HTML 头中加载美国地图：

 <head>
    <title>meteor-highcharts-demo</title>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>

实现一个包装地图的容器：

<template name="map">
    <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>

实例化地图：

if (Meteor.isClient) {
  var data = [{
    "value": 438,
    "code": "nj"
  }, {
    "value": 387.35,
    "code": "ri"
  }, {
    "value": 312.68,
    "code": "ma"
  }, {
    "value": 271.4,
    "code": "ct"
  }, {
    "value": 209.23,
    "code": "md"
  }, {
    "value": 195.18,
    "code": "ny"
  }, {
    "value": 154.87,
    "code": "de"
  }, {
    "value": 114.43,
    "code": "fl"
  }, {
    "value": 107.05,
    "code": "oh"
  }, {
    "value": 105.8,
    "code": "pa"
  }, {
    "value": 86.27,
    "code": "il"
  }, {
    "value": 83.85,
    "code": "ca"
  }, {
    "value": 72.83,
    "code": "hi"
  }, {
    "value": 69.03,
    "code": "va"
  }, {
    "value": 67.55,
    "code": "mi"
  }, {
    "value": 65.46,
    "code": "in"
  }, {
    "value": 63.8,
    "code": "nc"
  }, {
    "value": 54.59,
    "code": "ga"
  }, {
    "value": 53.29,
    "code": "tn"
  }, {
    "value": 53.2,
    "code": "nh"
  }, {
    "value": 51.45,
    "code": "sc"
  }, {
    "value": 39.61,
    "code": "la"
  }, {
    "value": 39.28,
    "code": "ky"
  }, {
    "value": 38.13,
    "code": "wi"
  }, {
    "value": 34.2,
    "code": "wa"
  }, {
    "value": 33.84,
    "code": "al"
  }, {
    "value": 31.36,
    "code": "mo"
  }, {
    "value": 30.75,
    "code": "tx"
  }, {
    "value": 29,
    "code": "wv"
  }, {
    "value": 25.41,
    "code": "vt"
  }, {
    "value": 23.86,
    "code": "mn"
  }, {
    "value": 23.42,
    "code": "ms"
  }, {
    "value": 20.22,
    "code": "ia"
  }, {
    "value": 19.82,
    "code": "ar"
  }, {
    "value": 19.4,
    "code": "ok"
  }, {
    "value": 17.43,
    "code": "az"
  }, {
    "value": 16.01,
    "code": "co"
  }, {
    "value": 15.95,
    "code": "me"
  }, {
    "value": 13.76,
    "code": "or"
  }, {
    "value": 12.69,
    "code": "ks"
  }, {
    "value": 10.5,
    "code": "ut"
  }, {
    "value": 8.6,
    "code": "ne"
  }, {
    "value": 7.03,
    "code": "nv"
  }, {
    "value": 6.04,
    "code": "id"
  }, {
    "value": 5.79,
    "code": "nm"
  }, {
    "value": 3.84,
    "code": "sd"
  }, {
    "value": 3.59,
    "code": "nd"
  }, {
    "value": 2.39,
    "code": "mt"
  }, {
    "value": 1.96,
    "code": "wy"
  }, {
    "value": 0.42,
    "code": "ak"
  }];
  Template.map.onRendered(function() {
    // Make codes uppercase to match the map data
    _.each(data, (el) => el.code = el.code.toUpperCase());
    // Instanciate the map
    $('#container').highcharts('Map', {
      chart: {
        borderWidth: 1
      },
      title: {
        text: 'US population density (/km²)'
      },
      legend: {
        layout: 'horizontal',
        borderWidth: 0,
        backgroundColor: 'rgba(255,255,255,0.85)',
        floating: true,
        verticalAlign: 'top',
        y: 25
      },
      mapNavigation: {
        enabled: true
      },
      colorAxis: {
        min: 1,
        type: 'logarithmic',
        minColor: '#EEEEFF',
        maxColor: '#000022',
        stops: [
          [0, '#EFEFFF'],
          [0.67, '#4444FF'],
          [1, '#000022']
        ]
      },
      series: [{
        animation: {
          duration: 1000
        },
        data: data,
        mapData: Highcharts.maps['countries/us/us-all'],
        joinBy: ['postal-code', 'code'],
        dataLabels: {
          enabled: true,
          color: '#FFFFFF',
          format: '{point.code}'
        },
        name: 'Population density',
        tooltip: {
          pointFormat: '{point.code}: {point.value}/km²'
        }
      }]
    });
  });
}

运行meteor以启动应用。

相关内容

最新更新

热门标签：