Blazor Server应用中Google饼图hover不显示tooltip问题求助

核心原因 #

Blazor Server基于SignalR实现双向绑定，框架会拦截部分原生DOM事件，再加上组件渲染时机的问题，导致Google Charts的hover触发逻辑无法正常工作。

具体解决步骤 #

1. 确保在Blazor组件渲染完成后初始化图表 #

不要直接在页面<script>标签中运行初始化代码，改用Blazor的OnAfterRenderAsync生命周期方法触发脚本，保证图表容器已被渲染：

Razor组件代码：

<div id="piechart" @ref="pieChartContainer" style="width: 900px; height: 500px;"
     @onmouseover:preventDefault="false" @onmousemove:preventDefault="false"></div>

@code {
    private ElementReference pieChartContainer;
    [Inject] private IJSRuntime JSRuntime { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initPieChart", pieChartContainer);
        }
    }
}

2. 配置Google Charts的Tooltip触发规则 #

在初始化脚本中明确指定tooltip的触发方式为hover，同时确保脚本在Google Charts加载完成后执行：

wwwroot/js/google-charts.js（新建此文件）：

window.initPieChart = function(element) {
    // 加载Google Charts核心包
    google.charts.load('current', {'packages':['corechart']});
    // 加载完成后初始化图表
    google.charts.setOnLoadCallback(function() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            ['Work',     11],
            ['Eat',      2],
            ['Commute',  2],
            ['Watch TV', 2],
            ['Sleep',    7]
        ]);

        var options = {
            title: 'My Daily Activities',
            tooltip: {
                trigger: 'hover', // 强制指定hover触发
                isHtml: false     // 可根据需求切换为true，测试哪种生效
            }
        };

        var chart = new google.visualization.PieChart(element);
        chart.draw(data, options);
    });
};

3. 正确引入Google Charts脚本 #

在_Layout.cshtml的<head>或<body>末尾添加Google Charts的CDN脚本：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="~/js/google-charts.js"></script>

4. 允许原生鼠标事件传递 #

在图表容器上添加@onmouseover:preventDefault="false"和@onmousemove:preventDefault="false"，避免Blazor框架拦截hover相关的原生事件，确保Google Charts能捕获到鼠标移动事件。

验证方法 #

启动Blazor Server应用，鼠标悬停在饼图切片上，此时应该能正常显示tooltip；若仍不生效，可尝试：

• 清除浏览器缓存，重新加载页面
• 将tooltip.isHtml切换为true测试
• 检查浏览器控制台是否有脚本错误

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