谷歌圖表：信息彈出窗口不能在浮動div上工作？

Question

如果您看下面的內容jsfiddle

右側的圖表不顯示彈出窗口。 這是爲什麼？我該如何解決它？

google.load('visualization', '1.0', { 
    'packages': ['corechart'] 
}); 

google.setOnLoadCallback(drawChart); 

function drawChart() { 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'User'); 
    data.addColumn('number', 'Messages Sent'); 
    data.addRows([ 
     ['Amelia', 35], 
     ['John', 1], 
     ['Ted', 3], 
     ['pat', 1] 
    ]); 

    var data2 = new google.visualization.DataTable(); 
    data2.addColumn('string', 'User'); 
    data2.addColumn('number', 'Messages Sent'); 
    data2.addRows([ 
     ['Amelia', 35], 
     ['John', 1], 
     ['Ted', 3], 
     ['pat', 1] 
    ]); 

    var options = { 
     'title': 'Ownership', 
      'width': 250, 
      'height': 250 
    }; 

    var options2 = { 
     'title': 'Ownership', 
      'width': 250, 
      'height': 250 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    var chart2 = new google.visualization.PieChart(document.getElementById('chart_div_2')); 
    chart.draw(data, options); 
    chart2.draw(data2, options2); 
} 

Answer 1

問題是分層問題。

如果您使用DOM檢查器，您將看到chart_div_2覆蓋chart_div。 Visualization API取消了圖表元素的容器div上的鼠標事件傳播，因此懸停事件不會傳遞到chart_div。

要解決這個問題，您需要在CSS中設置圖表div的寬度。請參閱Fiddle。