Highmaps:世界地图上的自定义数据标签
Highmaps : Custom data label on world map
问题是关于如何在 Highmaps 的世界地图中创建自定义数据标签 like here。我想要 pointData 的数据标签,我将其绘制为 mappoint
。
到目前为止,我的地图配置为
{
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 选项中 确保使用正确的形状和 class 标签名称:
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 参考文献:
问题是关于如何在 Highmaps 的世界地图中创建自定义数据标签 like here。我想要 pointData 的数据标签,我将其绘制为 mappoint
。
到目前为止,我的地图配置为
{
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 选项中 确保使用正确的形状和 class 标签名称:
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 参考文献: