使水平轴标签可点击 [英] Making the horizontal axis labels clickable

问题描述

我有一个关于Google Charts（柱形图）的具体问题。

我如何使日期可点击，这样我可以打开一个带有外部页面的模式对话框（jQuery）？

我已经添加了一个例子来说明我的意思，这显然是在Photoshop中完成的。

当我点击任何一个酒吧时，我可以调出一个警告对话框，但那不是我正在寻找的东西。

我试图搜索它，但无法找到任何内容。

附加的代码是我用来制作可点击的代码，也许有人知道如何修改，而不需要谷歌。

  var handler = function（e）{
 var sel = chart.getSelection（）; 
 sel = sel [0]; 
 if（sel&& sel ['row']&& sel ['column']）{
 var message =Hi ..; 
 alert（message）; 
} 
} 
 google.visualization.events.addListener（图表，'select'，handler）; 
  

任何帮助都将非常感谢。
- Robert。

解决方案

如果您使用'click'处理程序而不是'select'处理程序，则可以更轻松地与图表的其他部分进行交互。

下面是一个例子： http://jsfiddle.net/6LJhv/6/

您的事件对象 e 将具有 targetID 属性。 p>

这个 targetID 没有很好的记录，但是如果你运行调试器，你可以了解什么样的ID看起来像。

在各轴坐标轴（Line，Column等）上，轴标签的 targetID 看起来像像这样： hAxis＃0＃label＃1 。为了解决这个问题，这意味着你点击了第一个水平轴的第二个标签（基于0的索引）。

鉴于此，我们可以剖析 targetID 来确定您从数据中点击了哪个标签（如果它是离散的）。

（如果您的数据是连续的，与标签和数据行的关系不一定是1：1关系）

$ $ $ $ $ $ $ $ c $ var handler = function（e）{
var parts = e.targetID.split（'＃'）;
if（parts.indexOf（'label'）> = 0）{
var idx = parts [parts.indexOf（'label'）+ 1];
alert（data.getValue（0，parseInt（idx）））;
}
};
google.visualization.events.addListener（图表，'click'，handler）;

I have a question regarding Google Charts (Column Charts) in specific.
"How do I make the "date" clickable so I can open up a modal dialog (jQuery) with an external page?"

I have added an example to illustrate what I mean, this is obviously done in Photoshop.
I am able to bring up a alert dialog when I click any of the bars, but that's not really what I am looking for.

I have tried to search for it, but was unable to find something.
Attached is the code I used for making the bars clickable, maybe someone knows how to modify that without having to Google for it.

var handler = function(e) {
    var sel = chart.getSelection();
    sel = sel[0];
    if (sel && sel['row'] && sel['column']) {
      var message = "Hi..";
      alert(message);
    }
}
google.visualization.events.addListener(chart, 'select', handler);

Any assistance would be very much appreciated. - Robert.

解决方案

If you use a 'click' handler instead of a 'select' handler, you can more easily interact with other parts of the chart.

Here's an example: http://jsfiddle.net/6LJhv/6/

Your event object, e, will have a targetID property.

This targetID is not well documented, but if you run the debugger, you can get a sense of what IDs look like.

On the various axis charts (Line, Column, etc.) the targetID of the axis labels look something like this: hAxis#0#label#1. To break that down, it means that you clicked on the second label of the first horizontal axis (0 based index).

Given that, we can dissect the targetID to figure out which label you clicked on from the data if it's discrete.

(If your data is continuous, there isn't necessarily a 1:1 relationship with the labels and rows of data)

var handler = function(e) {
    var parts = e.targetID.split('#');
    if (parts.indexOf('label') >= 0) {
        var idx = parts[parts.indexOf('label') + 1];
        alert(data.getValue(0, parseInt(idx)));
    }
};
google.visualization.events.addListener(chart, 'click', handler);

这篇关于使水平轴标签可点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！