Google Charts: всплывающие окна не работают на плавающих 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_2chart_div. API визуализации отменяет распространение событий мыши в контейнере div элемента диаграммы, поэтому события зависания не передаются до chart_div.

Чтобы исправить это, вам нужно установить ширину диаграммных divs в CSS. См. Fiddle.