javascript - 从 Google 可视化图表(表格)内部触发时，Bootstrap 弹出窗口不起作用

Question

我遇到了 Twitter Bootsrap 弹出窗口的情况。我设法让它们通过 iframe 显示远程内容，但问题是我有一个 Google 可视化图表(表格)，并且它具有根据单元格值触发弹出窗口的链接。 表格可视化设置为允许 html，甚至可以触发模式，但不能触发弹出窗口。他们只在 table 外工作。

为了让你们了解发生了什么，我将完整的代码放在 jsFidle 中。 http://jsfiddle.net/TyPowers/xLkcY/ 尽管外部引用以相同的顺序加载(有时这会成为一个问题)，但在 jsFidle 中，表外部的 popoover 也不起作用。

$(function(){
    $(window).load(function(){
    var img = '<iframe frameborder="0" scrolling="no" height="220" width="420"
src="http://dxlite.g7vjr.org/?dx=LU5DX&limit=10"></iframe>';
    $("#blob").popover({title: 'Last 10 spots for the selected station', 
content: img, html:true});
    $('[rel="popover"]').popover();
    })
    });

要了解实际问题，请查看 http://qsl.net/lu5dx/dxo/ 表的第一条记录中的注释与表外的 popoever 具有完全相同的代码，但它不起作用。有人建议放置一个跨度类，但它也不起作用。 非常感谢您的帮助。 提前致谢。

Answer 1

要修复弹出窗口链接，您需要做的是在表的“就绪”事件处理程序中初始化它们。在创建 cTable 对象之后、调用仪表板的 #draw 方法之前，将其添加到 drawVisualization 函数中:

google.visualization.events.addListener(cTable, 'ready', function () {
    $('#' + cTable.getContainerId() + ' [rel="popover"]').popover();
});

其他一些需要注意的事项可能会有所帮助:您不需要预加载“table”和“corechart”包 - ChartWrapper 和 ControlWrapper 对象将负责为您加载必要的库(预加载不会没有伤害，但它也不会给你带来任何好处)。您也不需要为 ChartRangeFilter 指定 dataTable 参数 - 该参数由 Dashboard 处理。 ChartRangeFilter minRangeSize 选项是 ui 选项的子选项，而不是 ui.chartOptions，所以它应该设置如下:

options: {
    ui: {
        chartOptions: {
            height: 70,
            chartArea: {'height': '80%', 'width': '99.5%'},
            width: '100%',
            hAxis: {
                format: 'MMM d y'
            },
            label : 'End Date Filter'
        },
        // 1 day in milliseconds = 24 * 60 * 60 * 1000 = 86,400,000
        minRangeSize: 86400000,
        chartView: {
            // Display a single series (DXPedition End Date) to filter the table visualization.
            columns: [7, {type: 'number', calc: function() { return 0;}}]
        }
    },
    // Filter by the DXPedition End Date axis.
    filterColumnIndex: 7
}

此外，如果您将电子表格网址切换为使用 tq 参数而不是 ccc 参数，可能会有助于解决数据加载问题:

var query = new google.visualization.Query('https://docs.google.com/spreadsheet/tq?key=0AmR-D3rOsulZdDJtbmxWeVdXLUliSEhRV0gwNUZsbUE');

tq 参数告诉电子表格 API 返回 DataTable 对象。我在 jsfiddle 中对此进行了更改( http://jsfiddle.net/asgallant/xLkcY/10/ ，还包含上面的其他更改)，并注意到加载错误的数量显着减少(尽管它们并没有完全消失)。