Tooltip停止爲Google時間軸圖表工作

自從過去幾周以來我使用的是Google圖表API，但自從昨天以來，tooltip停止了時間軸圖表的工作。我有工具提示工作的線形圖，但不知何故，只有時間線圖似乎受此影響。這裏是我創建的圖表功能：Tooltip停止爲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;">

有人能告訴我如何調試&修復此問題嗎？

來源

2014-01-08 ThinkFloyd

我會首先檢查鼠標焦點在何時具有時間軸圖表。我猜你需要確保你可以專注於他們。 – BobbyD17

你有測試頁面或完整的代碼示例來演示問題嗎？我無法複製它。 – asgallant

經過大量的調試，我找到了罪魁禍首，但無法得到正確的理由。

所以，實際上我在我的頁面中使用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>

，但如果我刪除其中我渲染我的圖表格「面板體」類，它開始工作。看起來像一些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的圖表開發商如果他們使用的引導框架。

來源

2014-01-10 09:47:54 ThinkFloyd

Tooltip停止爲Google時間軸圖表工作

回答

相關問題