带饼图的Highcharts世界地图实现技术咨询（附代码片段）

Converting the US map with embedded pie charts to a world map version requires a few key adjustments to map data, point references, and placement logic. Here's how to do it step by step:

1. Swap US Map Data for World Map Data #

First, replace the US map module with Highcharts' world map data. Load the correct map resource instead of the US-specific one:

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

2. Adjust Your Data to Use Country IDs #

Instead of US state IDs (like 'us-ny'), use Highcharts' standard country IDs (e.g., 'US' for United States, 'CN' for China, 'DE' for Germany). Your data should link each country to its pie chart values, and optionally include custom offsets for pie placement:

const mapData = [
  {
    id: 'US',
    name: 'United States',
    pieData: [10, 20, 30],
    pieOffset: { x: 0, y: -20 } // Optional: Tweak pie position
  },
  {
    id: 'CN',
    name: 'China',
    pieData: [15, 25, 35]
  },
  // Add more countries as needed
];

3. Modify Pie Chart Placement Logic #

The core logic for adding pies stays similar, but we need to account for world map point properties (like country center coordinates) and handle cases where small countries might not have defined lat/lon:

// After initializing the world map chart
Highcharts.each(chart.series[0].points, function (country) {
  // Skip countries without data or valid coordinates
  if (!country.id || !country.properties.latitude || !country.properties.longitude) {
    return;
  }

  // Get country center coordinates and optional offset
  const pieOffset = country.pieOffset || { x: 0, y: 0 };
  const centerLat = parseFloat(country.properties.latitude);
  const centerLon = parseFloat(country.properties.longitude);

  // Convert lat/lon to chart pixel coordinates
  const pointPos = chart.fromLatLonToPoint({ lat: centerLat, lon: centerLon });

  // Add pie chart for the country
  chart.addSeries({
    type: 'pie',
    name: country.name + ' Distribution',
    data: country.pieData.map((val, i) => ({ y: val, name: `Category ${i+1}` })),
    center: [pointPos.x + pieOffset.x, pointPos.y + pieOffset.y],
    size: 40, // Adjust size based on country size if needed
    dataLabels: { enabled: false },
    showInLegend: false
  });
});

4. Full Working Example #

Here's a complete code snippet combining all parts:

<div id="container" style="height: 600px; width: 100%;"></div>

<script src="https://code.highcharts.com/maps/highmaps.js"></script>
<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  const mapData = [
    { id: 'US', name: 'United States', pieData: [30, 40, 30], pieOffset: { y: -20 } },
    { id: 'CN', name: 'China', pieData: [25, 50, 25] },
    { id: 'DE', name: 'Germany', pieData: [40, 30, 30], pieOffset: { x: 10 } },
    { id: 'BR', name: 'Brazil', pieData: [15, 60, 25] }
  ];

  // Initialize world map
  const chart = Highcharts.mapChart('container', {
    chart: { map: 'custom/world' },
    title: { text: 'World Map with Pie Charts' },
    series: [{
      name: 'Countries',
      data: mapData,
      mapData: Highcharts.maps['custom/world'],
      joinBy: 'id',
      tooltip: { headerFormat: '', pointFormat: '{point.name}' }
    }]
  });

  // Add pie charts to each country
  Highcharts.each(chart.series[0].points, function (country) {
    if (!country.id || !country.properties.latitude || !country.properties.longitude) {
      return;
    }

    const pieOffset = country.pieOffset || { x: 0, y: 0 };
    const centerLat = parseFloat(country.properties.latitude);
    const centerLon = parseFloat(country.properties.longitude);
    const pointPos = chart.fromLatLonToPoint({ lat: centerLat, lon: centerLon });

    chart.addSeries({
      type: 'pie',
      name: country.name + ' Data',
      data: country.pieData.map((val, idx) => ({ y: val, name: `Segment ${idx+1}` })),
      center: [pointPos.x + pieOffset.x, pointPos.y + pieOffset.y],
      size: 45,
      dataLabels: { enabled: false },
      tooltip: { pointFormat: '{point.name}: {point.y}%' }
    });
  });
});
</script>

Quick Notes: #

• Small Countries: For tiny nations (like island states), you might need to increase the pie size or adjust offsets manually since their center coordinates could be hard to spot.
• High-Resolution Maps: If you need more detailed boundaries, use mapdata/world-highres.js instead of the default world map.
• Performance: Adding too many pie charts can slow things down—consider limiting pies to countries with relevant data only.

内容的提问来源于stack exchange，提问作者I.ali