Webflow中无法渲染Highcharts地图模块，请求技术排查

1. 检查容器元素的尺寸设置 #

Highcharts/Highmaps需要容器有明确的宽高才能正常渲染，默认嵌入的div可能高度为0，导致图表渲染后无法显示。修改容器代码：

<div id='highmaps-test' style='height: 600px; width: 100%;'></div>

2. 确保脚本加载顺序和执行时机 #

Webflow可能会自动优化头部脚本的加载方式（比如添加async属性），导致map.js在highcharts.js之前加载，引发Highcharts未定义的错误。可以在嵌入元素内手动按顺序加载脚本，确保依赖关系：

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

// 先加载核心库，再加载地图模块
await loadScript('https://code.highcharts.com/highcharts.js');
await loadScript('https://code.highcharts.com/maps/modules/map.js');

3. 验证DOM元素是否存在 #

在渲染前确认容器元素能被找到，避免因Webflow的DOM结构调整导致id冲突或元素未加载：

const container = document.getElementById('highmaps-test');
if (!container) {
  console.error('找不到容器元素：highmaps-test');
  return;
}

4. 查看浏览器控制台的错误信息 #

这是最关键的排查步骤：

• Chrome：按F12打开开发者工具，切换到Console标签，查看红色的错误提示
• Safari：打开偏好设置 -> 高级 -> 勾选"在菜单栏中显示开发菜单"，然后点击开发 -> 显示Web检查器 -> 切换到Console

常见错误及解决：

• Highcharts is not defined：脚本加载顺序错误，确保highcharts.js先于map.js加载
• Failed to fetch：地图数据加载遇到CORS问题，可尝试将地图数据下载后上传到Webflow的资产库，改用本地URL加载
• Cannot read properties of undefined：配置项错误，检查joinBy、data等字段是否与地图拓扑数据匹配

完整修改后的嵌入代码 #

<div id='highmaps-test' style='height: 600px; width: 100%;'></div>

<script>
function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

(async () => {
  try {
    // 按顺序加载依赖脚本
    await loadScript('https://code.highcharts.com/highcharts.js');
    await loadScript('https://code.highcharts.com/maps/modules/map.js');
    
    // 确认容器存在
    const container = document.getElementById('highmaps-test');
    if (!container) {
      console.error('容器元素未找到');
      return;
    }

    // 加载地图拓扑数据
    const topology = await fetch(
      'https://code.highcharts.com/mapdata/custom/europe.topo.json'
    ).then(response => {
      if (!response.ok) throw new Error('地图数据加载失败');
      return response.json();
    });

    // 渲染地图
    Highcharts.mapChart(container, {
      chart: {
        map: topology,
        spacingBottom: 20
      },
      title: {
        text: 'Europe time zones'
      },
      accessibility: {
        series: {
          descriptionFormat: 'Timezone {series.name} with {series.points.length} countries.'
        },
        point: {
          valueDescriptionFormat: '{point.name}.'
        }
      },
      legend: {
        enabled: true
      },
      plotOptions: {
        map: {
          allAreas: false,
          joinBy: ['iso-a2', 'code'],
          dataLabels: {
            enabled: true,
            color: '#FFFFFF',
            style: {
              fontWeight: 'bold'
            },
            format: '{#if (lt point.properties.labelrank 5)}' +
                '{point.properties.iso-a2}' +
                '{/if}'
          },
          tooltip: {
            headerFormat: '',
            pointFormat: '{point.name}: <b>{series.name}</b>'
          }
        }
      },
      series: [{
        name: 'UTC',
        data: ['IE', 'IS', 'GB', 'PT'].map(code => ({ code }))
      }, {
        name: 'UTC + 1',
        data: [
            'NO', 'SE', 'DK', 'DE', 'NL', 'BE', 'LU', 'ES', 'FR', 'PL',
            'CZ', 'AT', 'CH', 'LI', 'SK', 'HU', 'SI', 'IT', 'SM', 'HR',
            'BA', 'YF', 'ME', 'AL', 'MK'
        ].map(code => ({ code }))
      }, {
        name: 'UTC + 2',
        data: [
            'FI', 'EE', 'LV', 'LT', 'BY', 'UA', 'MD', 'RO', 'BG', 'GR',
            'TR', 'CY'
        ].map(code => ({ code }))
      }, {
        name: 'UTC + 3',
        data: [{
            code: 'RU'
        }]
      }]
    });
  } catch (err) {
    console.error('渲染失败:', err);
  }
})();
</script>

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