Google 饼图在 blazor 服务器应用程序中悬停时未显示工具提示

Question

Google 饼图在 blazor 服务器应用程序中悬停时未显示工具提示。我使用了文档链接中提供的示例代码（https://developers.google.com/chart/interactive/docs/gallery/piechart）。如果我将完整的代码粘贴到普通的 HTML 文件上，它就会工作。我创建了一个新的示例应用程序，但它仍然无法正常工作。如果我们点击图表，它就会显示出来。我希望工具提示通过悬停显示，我也尝试过触发器、isHtml 选项。 请帮助我。

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'
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);

Answer 1

以下是一些可帮助您入门的故障排除步骤。

1.检查脚本顺序

确保 Google Charts 脚本在 Blazor 脚本之前加载。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="_content/BlazorApp/script.js"></script>

2.使用

google.charts.setOnLoadCallback

将图表初始化代码包含在

google.charts.setOnLoadCallback

中。

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  // Your chart code here
}

3.工具提示选项

将工具提示触发器显式设置为

'focus'

或

'selection'

。

var options = {
  title: 'My Daily Activities',
  tooltip: { trigger: 'focus' }  // or 'selection'
};

4. Blazor 互操作

如果您从 Blazor 调用 JS，请确保正确使用

IJSRuntime

。

@inject IJSRuntime JSRuntime

@code {
  private async Task DrawChart() {
    await JSRuntime.InvokeVoidAsync("drawChart");
  }
}

5.检查CSS

确保没有 CSS 干扰工具提示。

6.调试

使用浏览器的开发者工具调试JS错误。

7. Blazor 预渲染

如果使用预渲染，请确保在组件完全渲染后初始化图表。

csharp
protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)
  {
    await JSRuntime.InvokeVoidAsync("drawChart");
  }
}