하이 맵 : 세계지도의 맞춤 데이터 라벨

하이 맵의 세계지도에서 맞춤 데이터 라벨 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

당신이 언급 된 데모에서 구성을 사용할 수 있습니다 Highcharts에서 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; }

옵션은 라벨에 대한 적절한 모양과 클래스 이름을 사용하십시오 :

shape: 'callout', 
className: 'highlight'

JS에게 Highmaps의 버전을 포함 (일반 버전은 jsmaps 사이 highmaps.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

하이 맵 : 세계지도의 맞춤 데이터 라벨

답변

관련 문제