Highmaps：世界地图上的自定义数据标签答案

【问题标题】：Highmaps : Custom data label on world mapHighmaps：世界地图上的自定义数据标签
【发布时间】：2017-10-06 22:27:23
【问题描述】：

问题是关于如何在 Highmaps 的世界地图中创建自定义数据标签like here。我想要 pointData 的数据标签，我将其绘制为mappoint。到目前为止，我的地图配置为

{
  title: {
    text: 'Test map'
  },
  tooltip: {
    enabled: true
  },
  mapNavigation: {
    enabled: true
  },
  series: [
    {
      mapData: Highcharts.maps["custom/world"],
      data: countryData,
      joinBy: ['hc-key', 'key'],
      name: "Country Info",
      states: {
        hover: {
          color: "#00b700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.name}'
      },
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name;
        }
      },
      point: {
        events: {
          click() {
            console.log("Code : ", this.key)
          }
        }
      }
    },{
      type: 'mappoint',
      mapData: Highcharts.maps["custom/world"],
      data: pointData,
      name: 'Point Info',
      states: {
        hover: {
          color: "#abb700"
        }
      },
      tooltip: {
        headerFormat: '',
        pointFormat: '{point.location}'
      },
      dataLabels: {
        enabled: true,
        formatter: function () {
          return this.point.name;
        }
      },
      point: {
        events: {
          click() {
            console.log("Code : ", this.options.countryCode)
          }
        }
      },
      legend: {
        layout: 'vertical',
        align: 'left',
        verticalAlign: 'bottom'
      }
    }
  ]
}

我输入的数据是：

1) 国家数据：

[
  {
    "key": "in",
    "index": 2
  },
  {
    "key": "us",
    "index": 2
  }
]

2)点数据

[
  {
    "countryCode": "in",
    "site_id": 3,
    "center_count": 2,
    "location": "(Ahmedabad,India,APAC)",
    "headcount": 600,
    "lat": 23.022505,
    "lon": 72.5713621
  },
  {
    "countryCode": "us",
    "site_id": 4,
    "center_count": 2,
    "location": "(Arcadia,Greece,EMEA)",
    "headcount": 700,
    "lat": 34.1397292,
    "lon": -118.0353449
  }
]

注意：为简洁起见，一些变量已被替换为值。

【问题讨论】：

标签： javascript highcharts highmaps

【解决方案1】：

您可以使用您提到的演示中的配置：http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/css/series-datalabels

CSS

// data labels
.highcharts-data-label-box {
  fill: #a4edba;
  stroke: gray;
  stroke-width: 1px;
}

.highcharts-data-label {
  font-weight: normal;
}

.highlight .highcharts-data-label-box {
  fill: red;
  stroke-width: 2px;
  stroke: black;
}

.highlight.highcharts-data-label text {
  font-weight: bold;
  fill: white;
}

在 Highcharts 选项中，请务必为您的标签使用正确的形状和类名：

shape: 'callout',
className: 'highlight'

还记得包含 js 版本的 Highmaps（常规版本在 maps 和 highmaps.js 之间没有 js）：

<script src="https://code.highcharts.com/maps/js/highmaps.js"></script>

现场工作示例： http://jsfiddle.net/kkulig/s1t5h3m1/

文档参考： https://www.highcharts.com/docs/chart-design-and-style/style-by-css

API 参考：

【讨论】：