如何检测谷歌图表上的双击事件(饼图)

时间:2012-04-20 07:22:16

标签: javascript jquery google-visualization

如何在Google图表上检测到双击事件?这是我的代码:

    var options = {
      title: 'My Daily Activities'
    };

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    console.log(chart);
    chart.is3D = true;
    chart.draw(data, options);
    google.visualization.events.addListener(chart, 'click', function(e){
        console.log(e);
        console.log(chart.getSelection());
        var data = chart.getSelection();
        if(data.length > 0) {
            alert(0);
            chart.setSelection([]);
        }
        //window.open("http://classicmayank.limewebs.com", "mywindow1", "status=1,width=350,height=150");
    });
  }

4 个答案:

答案 0 :(得分:4)

我知道这是一个老问题,但我已经尝试过如何检测双击。只是通过测量它。它肯定不是一个好的或强大的解决方案,但似乎有效。

var firstClick = 0;
var secondClick = 0;

google.visualization.events.addListener(chart, 'click', function () {
    var date = new Date();
    var millis = date.getTime();

    if (millis - secondClick > 1000) {        
        // add delayed check if a single click occured
        setTimeout(function() {
            // no second click 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");

    } else {
        firstClick = millis;
        secondClick = 0;
    }
});    

JSFiddle to it here

答案 1 :(得分:1)

我做了以下

    var clicks = 0;

    function selectHandler() {

      clicks++;

      setTimeout(function() {
          if (clicks >= 2) {
              alert("double click");

          }
          clicks = 0;
      }, 250);



    }

    //bind the select event with chart
    google.visualization.events.addListener(chart, 'select', selectHandler);

答案 2 :(得分:0)

我估计它有点晚了但是使用的是

   google.visualization.events.addListener(chart, 'select', columnselectHandler)
   var status = 0;

   function columnselectHandler(e) {
            var selection = chart.getSelection();
            var selectedItem = selection[0];
            var data2 = getDDData(k);
            var columndata = [] 
      if (selectedItem) {
    if (status == 0){
    var name = data.getValue(selectedItem.row, 0);
    columndata[0] =  data2[0] 
    columndata[1] =  data2[selectedItem.row+1]                          
              var chartData = new google.visualization.arrayToDataTable(columndata);
        chart.draw(chartData, {width: 1200, height:500}, options);
        var button = document.getElementsByClassName("backToMain")[0];        
          button.setAttribute("id",chartType)
         button.setAttribute("style","display:inline; margin-top:150px; font-size:30px; position:absolute;")` 

答案 3 :(得分:-2)

Jquery提供了一个可以使用的双击事件。正如您在此处的示例中所见:

$("p").dblclick( function () { alert("Hello World!"); });

jQuery页面,您可以在此处找到更多内容:http://api.jquery.com/dblclick/