0

我有一个 Twitter Bootsrap 弹出框的情况。我设法让它们通过 iframe 显示远程内容，但问题是我有一个 Google 可视化图表（表格），它具有根据单元格值触发弹出框的链接。表格可视化设置为允许 html，即使触发模式也可以正常工作，但不能触发弹出框。他们只是在桌子外面工作。

为了让你们知道发生了什么，我将完整的代码放在了 jsFidle 中。http://jsfiddle.net/TyPowers/xLkcY/ 虽然外部引用以相同的顺序加载（有时恰好是一个问题），但在 jsFidle 中，表外的弹出框也不起作用。

$(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 代码完全相同，但它没有工作。有人建议放置一个跨度类，但它也不起作用。非常感谢您的帮助。提前致谢。 截屏

4

1 回答 1

2

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

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

需要注意的其他几件事可能会有所帮助：您不需要预加载“table”和“corechart”包 - ChartWrapper 和 ControlWrapper 对象将负责为您加载必要的库（预加载不会造成伤害，但它也不会给你带来任何好处）。您也不需要为dataTable-指定ChartRangeFilter由Dashboard. option 是 option的ChartRangeFilter minRangeSize子ui选项， not 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
}

此外，如果您将电子表格 url 切换为使用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/，还包含上面的其他更改）并注意到加载错误的数量显着减少（尽管它们并没有完全消失） .

于 2013-10-18T21:35:48.000 回答