高地图：世界地图上的自定义数据标签

问题是关于如何在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

高地图：世界地图上的自定义数据标签

回答

相关问题