Question

我使用谷歌图表API自上周以来，但从昨天工具提示停止工作的时间表图表。我有工具提示工作的折线图，但不知何故只有时间轴图表似乎受此影响。这是为我创建图表的功能：

drawTimelineChart : function(rows, elementId) {
    if(elementId == undefined || elementId == ''){
        elementId = 'day';
    }
    var container = document.getElementById(elementId);

    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({
        type : 'string',
        id : 'DateAndBatch',
    });
    dataTable.addColumn({
        type : 'string',
        id : 'TargetTable',
    });
    dataTable.addColumn({
        type : 'date',
        id : 'Start',
    });
    dataTable.addColumn({
        type : 'date',
        id : 'End',
    });
    dataTable.addRows(rows);
    var options = {
        timeline : {
            groupByRowLabel : false,
        }
    };
    chart.draw(dataTable, options);
}

当我查看DOM时，只要我将鼠标悬停在时间轴块上，但在页面上看不到工具提示，我就可以看到在DOM中插入了以下节点。

<div class="google-visualization-tooltip" style="width: 240px; height: 112px; left: 424px; top: 11.472000000000008px; pointer-events: none;">

有人可以告诉我如何调试＆amp;解决这个问题？

Answer 1

我在经过大量调试后找出了罪魁祸首，但无法得到正确的理由。

所以，实际上我在我的页面中使用Twitter bootstrap UI panel，当我将时间轴图表放在面板主体中时，它不起作用。这是标记：

<div class="row">
        <div class="panel panel-primary" style="width: 700px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Timeline<span class="dateInfo"></span>
                </h3>
            </div>
            <div class="panel-body" id="day" style="height: 1350px;"></div>
        </div>
    </div>

但如果我删除＆＃34; panel-body＆＃34;我正在渲染我的图表的div中的类，它开始工作。看起来像一些CSS问题，但我不能指出什么。所以这是有效的代码：

<div class="row">
        <div class="panel panel-primary" style="width: 700px;">
            <div class="panel-heading">
                <h3 class="panel-title">
                    Timeline<span class="dateInfo"></span>
                </h3>
            </div>
            <div id="day" style="height: 1350px;"></div>
        </div>
    </div>

无论如何，如果他们使用的是Bootstrap框架，它对于图表开发人员来说是一个很好的GOTCHA。

工具提示已停止为Google时间线图表工作

1 个答案: