如何在React Google Geo Chart美国区域中显示州标签

问题原因 #

• 数据格式错误：你的data属性是三层嵌套数组，不符合GeoChart要求的表头+数据行的二维数组结构，导致组件无法正确解析州名称用于显示标签。
• 缺少标签显示配置：regions模式下默认不显示区域标签，需要手动开启相关配置。

修正后的代码 #

<Chart
  chartEvents={[
    {
      eventName: "select",
      callback: ({ chartWrapper }) => {
        const chart = chartWrapper.getChart();
        const selection = chart.getSelection();
        if (selection.length === 0) return;
        // 修正数据索引：现在data是二维数组，直接取selection对应的行
        const region = data[selection[0].row];
        console.log("Selected : " + region[1]);
      },
    },
  ]}
  chartType="GeoChart"
  options={{
    region: "US",
    displayMode: "regions",
    backgroundColor: "lightgrey",
    resolution: "provinces",
    colors: ["#BDDBF7", "#6287AA", "#6287AA"],
    // 添加以下配置开启州标签显示
    showRegionLabels: true,
    // 可选：调整标签样式，比如字体大小
    regionLabelStyle: {
      fontSize: 12,
      color: "#333"
    }
  }}
  mapProperties={{
    tooltip: { isHtml: true },
  }}
  width="100%"
  height="400px"
  rootProps={{ "data-testid": "1" }}
  // 修正数据格式：二维数组，第一行为表头，后续为数据行
  data={[
    ["State Code", "State Name", "Value"],
    ["TX", "Texas", 345],
    ["UT", "Utah", 68],
    ["WY", "Wyoming", 45],
  ]}
/>

关键修改说明 #

• 修正数据结构：将原本的三层数组改为标准的二维数组，第一行定义数据列的含义（表头），后续每一行对应一个州的数据。
• 添加*showRegionLabels: true*：这个配置项会在regions显示模式下启用州名称标签的渲染。
• 可选的标签样式调整：通过*regionLabelStyle*可以自定义标签的字体大小、颜色等样式，适配你的页面设计。
• 修正选择事件的索引：因为数据结构调整，获取选中区域的代码也需要对应修改，直接取data[selection[0].row]即可拿到对应州的完整数据。

额外说明 #

如果需要更灵活的标签控制（比如只显示特定州的标签），可以考虑结合*displayMode: 'text'*模式，但这种模式会以文本标记的形式展示标签，而非直接叠加在区域上。根据你的需求，regions模式+showRegionLabels是最直接的解决方案。

内容的提问来源于stack exchange，提问作者ᴀL ᴘʜᴀ