Подсказка перестала работать для временной шкалы Google

Я использовал API диаграмм Google с последних нескольких недель, но со вчерашнего дня всплывающая подсказка перестала работать для диаграммы временной шкалы. У меня есть линейные диаграммы, для которых работает всплывающая подсказка, но каким-то образом это влияет только на временные диаграммы. Вот функция, которая создает для меня диаграмму:

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;​">​

Может ли кто-нибудь сказать мне, как отладить и исправить эту проблему?


javascript google-visualization timeline
person ThinkFloyd    schedule 08.01.2014    source источник
comment
Я бы начал с проверки того, где находится фокус вашей мыши, когда у вас есть графики временной шкалы. Я предполагаю, что вам нужно будет убедиться, что вы можете сосредоточиться на них.   -  person BobbyD17    schedule 08.01.2014
comment
У вас есть тестовая страница или полный пример кода, демонстрирующий проблему? Я не могу это воспроизвести.   -  person asgallant    schedule 08.01.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я выяснил виновника после большого количества отладки, но не смог найти правильную причину.

Итак, на самом деле я использую панель пользовательского интерфейса начальной загрузки Twitter на своей странице, и когда я помещаю свою временную шкалу внутри панели тело, оно не работает. Вот разметка:

<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>

но если я удалю класс «panel-body» из 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>

В любом случае, это хороший GOTCHA для разработчиков диаграмм, если они используют платформу Bootstrap.

person ThinkFloyd    schedule 10.01.2014