2017-03-29 30 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()]; 
} 

希望這有助於!