当鼠标悬停在事件处理程序中时,鼠标输出事件处理程序无效

时间:2014-10-11 09:25:24

标签: javascript google-visualization google-chartwrapper pygooglechart

对于下面的代码鼠标输出处理程序不工作,但当我删除鼠标相关代码工作正常。 (由于chart.draw()无法正常工作)。伙计们,你可以帮我解决这个问题。

  google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     11],
      ['Eat',      2],
      ['Commute',  2],
      ['Watch TV', 2],
      ['Sleep',    7]
    ]);

    var options = {
        title: 'My Daily Activities',
        legend: 'none',
        pieSliceText: 'percentage',
        slices: { }
    };

    var chart = new   google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);

    google.visualization.events.addListener(chart, 'onmouseout', function(e) {

        var slices = options.slices ;
        slices[e.row] = {};
        options['slices'] = slices;            
        chart.draw(data,options);
      } 
    );  // mouse out end

   google.visualization.events.addListener(chart, 'onmouseover', function(e) {

       var sliceid= e.row;
       console.log("mouse over"+sliceid);
       var slices = options.slices ;
       slices[e.row] = {offset:0.2};
       options['slices'] = slices;
       chart.draw(data,options);
           }
    );   // mouse over end
  }

1 个答案:

答案 0 :(得分:0)

似乎问题是鼠标反复出现重复图表重绘,没有足够的时间让鼠标悬停事件发生。这应该使它工作:

   google.visualization.events.addListener(chart, 'onmouseover', function(e) {
       var sliceid= e.row;
       var slices = options.slices ;
       if(slices.hasOwnProperty(e.row)){
           if(slices[e.row].hasOwnProperty('offset')) return false // if still mouseover, skip
       }

工作小提琴:http://jsfiddle.net/qm7f86ez/