高地圖：世界地圖上的自定義數據標籤

問題是關於如何在Highmaps的世界地圖中創建自定義數據標籤like here。我想爲我繪製爲mappoint的pointData數據標籤。到目前爲止，我有我的地圖配置高地圖：世界地圖上的自定義數據標籤

{ 
    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）countryData：

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

2）pointData

[ 
    { 
    "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 
    } 
]

注：爲簡潔起見，一些變量已被替換爲值。

來源

2017-10-06 Shalin LK

您可以從您提到的演示使用的配置：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的（普通版沒有js之間mapshighmaps.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參考：

來源

2017-10-06 14:27:23

高地圖：世界地圖上的自定義數據標籤

回答

相關問題