如何在 Meteor 中使用 Highmaps 和 Highcharts？

Question

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

{
  "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"
  ]
}

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

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

Cannot set property 'countries/us/us-all' of undefined

下面是来自 highcharts 演示站点的 JSFiddle。

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

因此 highcharts.Map 未定义。我尝试了多种方法：

将配置基础选项更改为高maps.js
删除 modules/maps.js
将我们-all.js放入兼容目录

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

Answer 1

错误：

highcharts.Map is undefined

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

如果你想在 Meteor 中实现 Highcharts Maps demo，请遵循以下七个步骤：

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

{
  "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 启动您的应用程序。

我还准备了一个演示存储库，托管在 GitHub。

如何在 Meteor 中使用 Highmaps 和 Highcharts？

How to use Highmaps and Highcharts with Meteor?

javascript

meteor

highcharts

highmaps