如何将href整合到谷歌可视化库javascript中？

Question

我正在使用Google的可视化库在我的Rails应用中绘制图表。我现在的代码是：

    var data = google.visualization.arrayToDataTable([
      ['Phrase', 'Frequency'],
        <% @frequency.each do |key,value| %>
            ['<%= key %>', <%= value %>],
        <% end %>
    ]);

这很有效。但是，我想启用一个功能，允许用户单击y轴上的值然后触发事件（例如，打开一个链接）。我尝试了下面的代码，但它不起作用。关于如何将href合并到上面的js片段中的任何建议？

    var data = google.visualization.arrayToDataTable([
      ['Phrase', 'Frequency'],
        <% @frequency.each do |key,value| %>
            [<a href = "#"'<%= key %>'</a>, <%= value %>],
        <% end %>
    ]);

我也愿意在图表上显示的工具提示中包含一个href。

API的链接是：https://developers.google.com/chart/interactive/docs/gallery/barchart

Answer 1

有两种方法可以做到这一点。

HTML工具提示

第一种方法是使用html tooltips在鼠标悬停栏时显示网址。

这是最简单的方法，但这是你的第二选择。

自定义事件处理程序

要在单击图表项时发生某些事情，您需要创建一个自定义事件处理程序。

首先在条形图上查看events的文档。在这种情况下，您需要使用select事件。

调用select事件时，您可以使用getSelection()函数查看正在选择哪一行数据。如果您要在第三列中使用您要使用的网址，则可以对所选行使用data.getValue()，并使用javascript根据需要打开该链接。

您可以根据需要对其进行配置，但这应该为您设置正确的路径以便能够找到它。