javascript - 谷歌图表：信息弹出窗口在浮动 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_2overlays chart_div。可视化 API 取消了图表元素容器 div 上的鼠标事件传播，因此悬停事件不会传递到chart_div.

要解决此问题，您需要在 CSS 中设置图表 div 的宽度。见小提琴。