个人中心
gpt4 book ai didi

javascript - 如何在 Meteor 中使用 Highmaps 和 Highcharts？

转载 作者：行者123 更新时间：2023-11-29 14:43:58 25 4
gpt4 key购买 nike

我在我的应用程序中使用了 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。我试图在没有任何运气的情况下渲染示例演示 map “美国人口密度”。我不确定正确的配置选项是什么以及我应该将 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 是未定义的。我尝试了多种方法:

  1. 将配置基础选项更改为 highmaps.js
  2. 删除 modules/maps.js
  3. 将 us-all.js 放入兼容目录

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

最佳答案

错误:

highcharts.Map is undefined

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

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

  1. 运行命令meteor add highcharts:highcharts-meteor。
  2. 运行 meteor 以初始化 highcharts-container。
  3. 打开文件 /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"
  ]
}
  1. 在您的 HTML head 中加载美国 map :
 <head>
    <title>meteor-highcharts-demo</title>
    <script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script>
</head>
  1. 实现一个包装您的 map 的容器:
<template name="map">
    <div id="container" style="height: 500px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
</template>
  1. 实例化 map :
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²'
        }
      }]
    });
  });

}
  1. 运行 meteor 以启动您的应用。

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

关于javascript - 如何在 Meteor 中使用 Highmaps 和 Highcharts？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34911550/

25 4 0
文章推荐： php - 需要将 2 个价格文件排序并过滤为一个
文章推荐： php - 获取某个值的 mysql_query 输出位置(数字)
文章推荐： mysql - 如何将表中的字段粘贴到具有相同属性的另一个表中
文章推荐： php - mysql查询问题
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com