使水平轴标签可点击

Question

我对Google图表（列图表）有疑问。具体 “如何使”日期“可点击，以便我可以打开一个带有外部页面的模态对话框（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(chart, 'select', handler);

非常感谢任何帮助。   - 罗伯特。

Answer 1

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

以下是一个示例：http://jsfiddle.net/6LJhv/6/

您的事件对象e将拥有targetID属性。

此targetID没有详细记录，但如果您运行调试器，则可以了解ID的外观。

在各种轴图表（线，列等）上，轴标签的targetID如下所示：hAxis#0#label#1。要将其分解，这意味着您单击了第一个水平轴的第二个标签（基于0的索引）。

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

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

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);