Highmaps加勒比海地图

问题描述 投票:0回答:1

我正在尝试用高图显示点(纬度/经度)。我已经为美国成功完成了此任务,因为有一张完整的地图。现在,我试图在加勒比海地区显示点。我找到了以下链接来为加勒比海地区创建地图:Demo

问题在于此选项,我只能为整个国家/地区设置值。但是我需要在不同的国家/地区中设定特定的价值观。例如加利福尼亚地图。enter image description here

我试图将示例代码更新为:

import mapDataUSWithoutCentral from "@highcharts/map-collection/custom/north-america-no-central.geo.json"

    var dataCaribbean = [{
    'hc-key': 'cu', //Cuba
    value: 0
},{
    'hc-key': 'bs', //Bahamas
    value: 0
},{
  'hc-key': 'tc', //Turks and Caicos Islands
  value: 0
},{
  'hc-key': 'ky', //Cayman Islands
  value: 0
},{
  'hc-key': 'ht', //Haiti
  value: 0
},{
  'hc-key': 'do', //Dominican Republic
  value: 0
},{
  'hc-key': 'jm', //Jamaica
  value: 0
},{
  'hc-key': 'pr', //Puerto Rico
  value: 0
},
{ z: 10, keyword: "demo", lat: 23.113592, lon: -82.366592, color: '#ff0000' }
];

  const mapOptionsCaribbean = {
    chart: {
      map: mapDataUSWithoutCentral
    },
    title: {
      text: 'Caribbean'
    },
    mapNavigation: {
      enabled: true,
  },
    series: [{
      data: dataCaribbean,
      mapData: mapDataUSWithoutCentral,
      joinBy: 'hc-key',
      allAreas: false,
      name: 'Random data',
      states: {
          hover: {
              color: '#a4edba'
          }
      },
      dataLabels: {
          enabled: true,
          format: '{point.name}'
      }
  }]
  }

但是结果仅仅是这样:enter image description here数据数组中的最后一点不显示。

reactjs highcharts
1个回答
0
投票

您需要使用mapbubble类型创建另一个系列并添加proj4库:

series: [...,
  {
    type: "mapbubble",
    data: [...]
  }
]

实时演示: https://codesandbox.io/s/highcharts-react-demo-o5roi

API参考: https://api.highcharts.com/highmaps/series.mapbubble.data

© www.soinside.com 2019 - 2024. All rights reserved.