是否可以使用谷歌图表API成为列的超链接？

I am using Visualr http://googlevisualr.herokuapp.com/ with Rails and having a good amount of success creating dynamic charts. However, I am wondering if it's possible to allow the user to click on the column in a 'column chart' and be linked to a page? I am happy to know the java version if you aren't familiar with visualr.

我正在使用Visualr http://googlevisualr.herokuapp.com/和Rails,并且在创建动态图表方面取得了很大的成功。但是,我想知道是否可以允许用户点击“柱形图”中的列并链接到页面?如果您不熟悉visualr,我很高兴知道java版本。

Thanks!

2 个解决方案

#1

Google Charts (whether you access them directly or via a wrapper gem like Visualr) are simple images, so the straight answer is "No", at least not without doing some work of your own. In order to achieve this you would need to place your own transparent clickable links (or divs or whatever) over the image, in the right place, to correspond to the columns that google generate in the image.

谷歌图表(无论您是直接访问还是通过像Visualr这样的包装宝石访问它们)都是简单的图像,所以直接的答案是“不”,至少在没有自己做一些工作的情况下也是如此。为了实现这一目标,您需要在图像的正确位置放置您自己的透明可点击链接(或div或其他),以对应谷歌在图像中生成的列。

I'd imagine this would be tricky and error prone - it might actually be easier for you to just generate the columns yourself in html and css, using the data you would previously have sent to google to set the height (in %) of the columns. Then, each column would be a seperate html element and could link to whatever you want.

我想这会很棘手并且容易出错 - 实际上你可能更容易在html和css中自己生成列,使用你之前发送给Google的数据来设置高度(以%为单位)列。然后,每列将是一个单独的html元素,可以链接到你想要的任何内容。

So, more control = more work. As usual :)

所以,更多的控制=更多的工作。照常 :)

#2

It now is available!

There has recently been an update on this issue. Therefore I want to update this SO Q&A.

最近有关于这个问题的更新。因此,我想更新此SO问答。

Resources:

Google Visualr Github Pull Request #39
Google Visualr Github Issue #36

Google Visualr Github Pull Request#39 Google Visualr Github Issue#36

Code example

xxx_controller.rb

@table = GoogleVisualr::Interactive::ColumnChart.new(g, options_g)
@table.add_listener("select", "function(e) {
                                 EventHandler(e, chart, data_table)
                               }")

And then in a JS file e.g. app/assets/javascripts/application.js:

然后在JS文件中,例如应用程序/资产/ Java脚本/ application.js中:

function EventHandler(e, chart, data) {
var selection = chart.getSelection();
    if (selection.length > 0) {
        var row = selection[0].row;
        var department = data.getValue(row, 0);
        alert(department + " | " + row)
    }
}