如何在Google图表(饼图)上检测双击事件

问题描述 投票:4回答:5

如何检测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");
    });
  }
javascript jquery google-visualization
5个回答
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到here


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

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

0
投票

我是通过听chart_div(容器)的双击事件来完成的。


-3
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.