点击Google line / area chart的图例上的活动

时间:2016-02-19 10:40:13

标签: javascript google-visualization

我想创建一个功能,例如: 点击行/区域图表的图例,链接到另一个标签;单击新选项卡后将打开。 我已经为条形图实现了这项功能,即点击谷歌条形图的每个栏,在新标签页中打开:chart.getSelection() does not work properly with google bar charts

但是我无法找到任何解决方案来点击折线图的图例并在新标签页中打开。

我在stackoverflow上经历了其他问题。像这里:Google Line Chart Legend Click Events  但到处都提到了关于传说和使用getSelection的'select'事件。 但我已经在线/面积图上选择/取消选择线/区域使用此事件。所以我想在传说上使用特别的点击事件。

我能够通过警告声明获取事件,但现在我想要检索被点击的图例的名称。这就是问题所在。 请仔细阅读以下代码:

JsFiddle Ref:here

google.visualization.events.addListener(gChart, 'click', function () {
            var date = new Date();
            var millis = date.getTime();
            //match is undefined here, not able to retrieve name of legend which is being clicked.

            var match = e.targetID.match(/legend#\d+#/);
            console.log(match);

            if (millis - secondClick > 1000) {
                // add dealyed check if a single click occured
                setTimeout(function () {
                    // no second fast enough, it is a single click
                    if (secondClick == 0) {
                        //alert("click");
                    }
                }, 250);
            }

            // try to measure if double-clicked
            if (millis - firstClick < 250) {
                firstClick = 0;
                secondClick = millis;

                alert("doubleClick");
}
});

在上面的代码中,'match'未定义。请帮我解决这个问题。

任何帮助都很明显!提前谢谢。

更新 解决方案

var match = e.targetID.match(/legend/);
var rowIndex = parseInt((match['input']).substring((match['input']).lastIndexOf("#") + 1));
console.log("rowIndex :: ", rowIndex);

新问题 修改后的要求后,我现在想通过jQuery处理click事件;任何帮助都是值得的。请帮忙!

我正在尝试在Google可视化的准备事件中应用点击事件。

var readyEvent = google.visualization.events.addListener(gChart, 'ready', function () {
            google.visualization.events.removeListener(readyEvent);

            $('.chart-container').find('#' + this.id + '').on('dblclick', function (e) {
                var xPos = e.offsetX;
                var yPos = e.offsetX;
                console.log("id :: ",this);
                var cli = gChart.getChartLayoutInterface();
                var xBounds = cli.getBoundingBox('legend');
                //var x1 = cli.getXLocation(xPos);
                console.log(" xPos, cli, xBounds, x1 :: ", xPos, cli, xBounds);
                if (
                    (xPos >= xBounds.left || xPos <= xBounds.left + xBounds.width)
                ) {
                    var snapR = Defiant.getSnapshot(data);
                    var resTot = JSON.search(snapR, '//label');
                    console.log("click event :: ", data, resTot);
                   // gChart.draw(data, options);
                }
            });
        });

我在这里犯了一些错误,但无法得到。我有很多图表单页。 (图表容器是持有chart-div的类)

0 个答案:

没有答案