2017-03-29 25 views
0

我正面临Highmaps的一个奇怪问题。我有一张Geojson地图,Highmaps正确显示。鼠标悬停工作和工具提示出现在正确的位置。但是,当我打开数据标签时,它们看起来颠倒了。也就是说,应该出现在地图底部附近(以省份为中心)的标签现在出现在顶部附近,反之亦然。 数据标签的坐标系似乎相反。Highmaps上的数据标签从下到上

Highmaps data labels

在图像,标签“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], 
      ... 

事情我已经尝试:

  • 的datalabels是SVG元素。我认为也许周围的CSS规则可能会影响它们的位置,但由于使用类似转换的其他CSS元素位于正确的位置,所以这似乎不成问题。

  • 经度是负值。我尝试通过在每个值上加上+100来使它们成为正值,只是为了看看负值是否应该归咎于它们,但它们不是。这是一个长镜头。

  • 我已经玩过数据标签的API设置,但似乎没有影响其从上到下的位置的开关。我也会认为保持默认值不变应该导致正确的放置。

  • 我想知道如何通过Highmaps计算数据标签的位置。也许Highmaps找不到每个多边形的中心并需要提示?我向geojson中的功能添加了经度和纬度值,但这没有帮助。我之前也在类似的情况下使用过Highmaps,而不需要添加这些数据。

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

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

我在做什么错?

+0

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

回答

0

对于遇到此问题的其他人,我可以通过将属性'chartType'添加到我的配置对象来解决此问题。 highcharts-ng图书馆的文档提到了制作一个highstock图表,但是对于highmaps没有提及它。 lib默认为'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()]; 
} 

希望这有助于!