问题是关于如何创建自定义数据标签 like here在 Highmaps 的世界地图中。我想要 pointData 的数据标签,我将其绘制为 mappoint
。
到目前为止,我的 map 配置为
{
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) 国家数据:
[
{
"key": "in",
"index": 2
},
{
"key": "us",
"index": 2
}
]
2)点数据
[
{
"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
}
]
注意:为简洁起见,一些变量已被替换为值。
最佳答案
您可以使用您引用的演示中的配置: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(常规版本在 maps
和 highmaps.js 之间没有
):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 引用:
关于javascript - 高位图 : Custom data label on world map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46602665/