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-all.js文件放在我的目录中。

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

无法设置未定义
的属性'countries / us / us-all'

来自highcharts演示网站的JSFiddle如下。

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

所以highcharts.Map未定义。我尝试过多种方法：

将配置基本选项更改为highmaps.js
删除modules / maps.js
将us-all.js放在兼容性目录

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

Answer 1

错误：

highcharts.Map未定义

发生

，因为您包含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。

如何在流星上使用Highmaps和Highcharts？

1 个答案: