Google Geo Chart澳大利亚州级区域Tooltip不显示问题求助

你当前的问题核心是数据结构不完整、配置项存在冲突，导致州级Tooltip无法正常显示。以下是具体解决步骤：

问题分析 #

1. 数据定义了tooltip的HTML角色，但每个州的数据行缺少对应tooltip内容，悬停时自然无数据展示。
2. sizeAxis配置仅适用于displayMode: 'markers'模式，在regions模式下无效，可能干扰图表交互逻辑。

解决方案 #

1. 完善数据结构 #

为每个州的数据行补充tooltip列的HTML内容，匹配你定义的tooltip角色：

export const data = [
    [
        'State',
        'Primary usage',
        { role: 'tooltip', type: 'string', p: { html: true } },
    ],
    ['VIC', 11, '<div><strong>维多利亚州</strong><br>主要使用量：11</div>'],
    ['NSW', 22, '<div><strong>新南威尔士州</strong><br>主要使用量：22</div>'],
    ['QLD', 2, '<div><strong>昆士兰州</strong><br>主要使用量：2</div>'],
    ['TAS', 2, '<div><strong>塔斯马尼亚州</strong><br>主要使用量：2</div>'],
]

2. 调整配置选项 #

移除无效的sizeAxis配置，确保tooltip的HTML模式正确开启：

const options = {
    region: 'AU',
    resolution: 'provinces',
    displayMode: 'regions',
    tooltip: { isHtml: true },
    backgroundColor: '#81D4FA',
    datalessRegionColor: '#0059b3',
    defaultColor: '#f5f5f5',
    height: 700,
}

3. 可选：自定义事件增强交互（若默认tooltip仍不生效） #

如果上述调整后仍有问题，可通过ready事件手动绑定鼠标事件，自定义tooltip展示：

const onChartReady = (chart) => {
    const chartDiv = chart.getContainer();
    // 监听鼠标移动事件
    chartDiv.addEventListener('mousemove', (e) => {
        const target = e.target;
        // 识别州级区域元素
        if (target.tagName === 'path' && target.getAttribute('aria-label')) {
            const stateCode = target.getAttribute('aria-label').split(',')[0];
            // 匹配对应数据
            const stateData = data.find(row => row[0] === stateCode);
            if (stateData) {
                // 创建/显示自定义tooltip
                let tooltip = document.getElementById('custom-tooltip');
                if (!tooltip) {
                    tooltip = document.createElement('div');
                    tooltip.id = 'custom-tooltip';
                    tooltip.style.cssText = `
                        position: absolute;
                        background: white;
                        padding: 8px;
                        border-radius: 4px;
                        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                        pointer-events: none;
                    `;
                    chartDiv.appendChild(tooltip);
                }
                tooltip.innerHTML = stateData[2];
                tooltip.style.left = `${e.pageX + 10}px`;
                tooltip.style.top = `${e.pageY + 10}px`;
                tooltip.style.display = 'block';
            }
        } else {
            const tooltip = document.getElementById('custom-tooltip');
            if (tooltip) tooltip.style.display = 'none';
        }
    });
};

效果说明 #

完成上述调整后，鼠标悬停澳大利亚各州时，会显示你自定义的HTML格式tooltip内容，包含州名和对应使用量数据。

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