Highmaps 上的数据标签从下到上显示答案

【问题标题】：Datalabels on Highmaps appearing bottom to topHighmaps 上的数据标签从下到上显示
【发布时间】：2018-08-19 03:35:42
【问题描述】：

我在使用 Highmaps 时遇到了一个奇怪的问题。我有一张 Highmaps 正确显示的 geojson 地图。鼠标悬停工作和工具提示出现在正确的位置。但是，当我打开数据标签时，它们会颠倒过来。也就是说，应该出现在地图底部附近（以其省份为中心）的标签现在出现在顶部附近，反之亦然。 数据标签的坐标系似乎颠倒了。

在图像中，标签“603863”应该出现在最底部的省份上，而“1966085”应该出现在最上面的省份上。

我的 geojson 数据示例：

var provincePolygons = {
  "type":"FeatureCollection",
  "features":[
    {"type":"Feature",
     "properties":{
       "id":"05","name":"Tete"},
       "geometry":{"type":"Polygon",
          "coordinates":[[
          [32.636,-14.204],
          [33.245,-13.998],
          [33.299,-14.032],
          [33.300,-14.146],
          [33.385,-14.237],
          [33.478,-14.404],
          [33.544,-14.434],
          [33.627,-14.528],
          [33.640,-14.594],
          [33.718,-14.572],
          ...

我尝试过的事情：

数据标签是 SVG 元素。我认为周围的 CSS 规则可能会影响它们的位置，但由于使用类似转换的其他 CSS 元素位于正确的位置，这似乎不是问题。
经度为负值。我尝试通过在每个值上添加 +100 来使它们成为正值，只是为了看看是否应该归咎于负值，但事实并非如此。这是一个远射。
我自然而然地使用了数据标签的 API 设置，但似乎没有影响它们从上到下放置的开关。我还认为保持默认值不变应该会导致正确放置。
我想知道 Highmaps 如何计算数据标签的位置。也许 Highmaps 找不到每个多边形的中心，需要提示？我在 geojson 中的功能中添加了纬度和经度值，但这没有帮助。我之前也在类似的情况下使用过Highmaps，无需添加此类数据。

在生成的 SVG 中有一个名为“highcharts-data-labels”的组。我正在考虑尝试以某种方式颠倒其坐标系以将数据标签移动到正确的位置，但这对于应该正常工作的东西来说将是一个复杂的干预。

请注意，我使用的是 ng-highcharts。

我做错了什么？

【问题讨论】：

我停止使用 ng-highcharts 并直接使用 Highcharts 来显示我的地图。问题消失了。

标签： svg highcharts

【解决方案1】：

对于遇到此问题的其他人，我可以通过将属性“chartType”添加到我的配置对象来解决此问题。 highcharts-ng 库的文档在制作 highstock 图表时提到了这一点，但对于 highmaps 没有提及。该库默认为'chart'，但您需要输入chartType:'map'，它应该可以解决问题:)

这是来自 highcharts-ng 库的相关代码，其中 config 是您的图表对象：

var chartTypeMap = {
  'stock': 'StockChart',
  'map':   'Map',
  'chart': 'Chart'
};

function getChartType(config) {
  if (config === undefined || config.chartType === undefined) return 'Chart';
  return chartTypeMap[('' + config.chartType).toLowerCase()];
}

希望这会有所帮助！

【讨论】：