Highmaps MapBubble多职业标签堆叠问题：如何显示全部职业？

哈哈，这个问题太常见了！Highmaps的mapbubble默认会把同一地理坐标的点完全重叠，导致只有最后一个能看到，我给你三个实用的解决方案，你可以根据需求选：

这是最直观的解决方式——让每个职业的气泡位置稍微错开，避免完全叠在一起。你可以在预处理dataArray的时候，给每个数据点的经纬度加上小范围的随机值，或者按职业类型分配固定偏移（比如不同职业往不同方向挪一点）。

示例代码片段：

// 预处理数据，添加随机偏移
const processedData = dataArray.map(item => {
  // 随机偏移范围±0.5，可根据地图缩放比例调整
  const offsetLat = (Math.random() - 0.5) * 1;
  const offsetLon = (Math.random() - 0.5) * 1;
  return {
    ...item,
    lat: item.lat + offsetLat,
    lon: item.lon + offsetLon
  };
});

// 初始化地图时使用处理后的数据
Highcharts.mapChart('container', {
  chart: {
    borderWidth: 1,
    map: 'custom/world'
  },
  // ...其他配置
  series: [{
    type: 'mapbubble',
    data: processedData,
    // 可以设置气泡的最小/最大尺寸，避免偏移后太小看不见
    minSize: '10%',
    maxSize: '20%'
  }]
});

如果不想调整气泡位置，也可以把同一个国家的所有职业数据聚合到一个气泡里，鼠标hover时通过tooltip展示全部职业信息。这种方式更简洁，适合数据量较大的场景。

实现步骤：

1. 先按国家分组，把同国家的职业数据合并
2. 每个分组生成一个气泡点，在tooltip里遍历展示所有职业

示例代码：

// 按国家分组数据
const groupedData = {};
dataArray.forEach(item => {
  if (!groupedData[item.country]) {
    groupedData[item.country] = {
      name: item.country,
      lat: item.lat,
      lon: item.lon,
      jobs: []
    };
  }
  groupedData[item.country].jobs.push(item.job);
});

// 转换为Highmaps需要的数据格式
const chartData = Object.values(groupedData).map(group => ({
  ...group,
  // 用职业数量作为气泡大小，也可以自定义其他数值
  z: group.jobs.length
}));

// 配置地图
Highcharts.mapChart('container', {
  chart: {
    borderWidth: 1,
    map: 'custom/world'
  },
  // ...其他配置
  series: [{
    type: 'mapbubble',
    data: chartData,
    tooltip: {
      formatter: function() {
        // 把职业列表转成HTML格式
        const jobList = this.point.jobs.map(job => `<li>${job}</li>`).join('');
        return `<strong>${this.point.name}</strong><br>职业列表：<ul>${jobList}</ul>`;
      }
    }
  }]
});

如果每个职业需要不同的样式（比如颜色区分），可以把不同职业的数据拆分到独立的Series里，每个Series对应一种职业。Highmaps会自动调整同坐标点的位置，而且还能通过图例区分不同职业。

示例代码：

// 提取所有独特的职业类型
const jobTypes = [...new Set(dataArray.map(item => item.job))];

// 按职业生成多个Series
const series = jobTypes.map((job, index) => {
  const jobData = dataArray.filter(item => item.job === job);
  return {
    type: 'mapbubble',
    name: job,
    data: jobData,
    // 自动分配不同颜色，也可以自定义
    color: Highcharts.getOptions().colors[index]
  };
});

// 初始化地图
Highcharts.mapChart('container', {
  chart: {
    borderWidth: 1,
    map: 'custom/world'
  },
  // ...其他配置
  series: series,
  // 显示图例，方便区分不同职业
  legend: {
    enabled: true
  }
});

内容的提问来源于stack exchange，提问作者user5986985