Question

问题是如何在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）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
  }
]

注意：为简洁起见，某些变量已被替换为值。

Answer 1

您可以使用您引用的演示中的配置：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和maps之间没有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参考：

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

1 个答案: