React-Plotly.js Choropleth等值区域图不显示地图问题排查

问题描述 #

尝试改造现有Plot.ly React组件适配新数据，替换为三个国家的测试数据后，仅显示z轴渐变效果，世界地图未出现。代码如下：

<Plot
  data={[
    {
      type: 'choropleth',
      locationmode: 'country names',
      locations: ['MEXICO', 'CANADA', 'EL SALVADOR'],
      z: [1, 2, 3],
      text: ['MEXICO', 'CANADA', 'EL SALVADOR'],
      autocolorscale: true,
    },
  ]}
  layout={{
    paper_bgcolor: '#f7e4ca',
    hoverlabel: {
      bordercolor: '#f7e4ca',
    },
    geo: {
      scope: 'world',
      projection: {
        type: 'robinson',
      },
    },
  }}
  style={{ width: '100%', fontWeight: '900' }}
/>

问题排查与解决方案 #

1. 国家名称格式问题 #

locationmode: 'country names'要求国家名称必须和Plotly内置的标准名称完全匹配，你的写法存在大小写和格式问题：

• 正确标准名称应为全小写或规范格式，比如'mexico'、'canada'、'el salvador'（注意El Salvador是空格分隔的小写）
• 更稳定的方式是使用ISO 3国家代码：把locationmode改为'ISO-3'，locations替换为对应代码['MEX', 'CAN', 'SLV']，彻底避免名称匹配错误。

2. 地图未渲染的其他修复点 #

• 补充组件高度：当前仅设置width: '100%'，未指定高度，Plotly图表需要明确宽高才能渲染地图区域，可添加height: '600px'或其他合适值。
• 强制显示陆地底色：给geo配置添加showland: true和landcolor属性，确保地图区域可见：

  geo: {
    scope: 'world',
    projection: { type: 'robinson' },
    showland: true,
    landcolor: '#e0e0e0'
  }
  

3. 原始数据传入的正确方式 #

如果要传入自定义原始数据（比如API返回或本地存储的国家-数值对），按以下步骤处理：

• 先整理数据为结构化数组：

  const rawData = [
    { country: 'Mexico', code: 'MEX', value: 1 },
    { country: 'Canada', code: 'CAN', value: 2 },
    { country: 'El Salvador', code: 'SLV', value: 3 }
  ];
  

• 从原始数据中提取所需字段数组：

  const locations = rawData.map(item => item.code);
  const zValues = rawData.map(item => item.value);
  const textLabels = rawData.map(item => item.country);
  

• 将提取后的数组传入Plot组件的data中，推荐始终使用ISO国家代码作为locations值，避免匹配风险。

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