2014-01-08 4 views
0

지난 몇 주 동안 Google 차트 API를 사용 중이었지만 어제 툴팁이 타임 라인 차트에서 작동하지 않아서 사용하지 않았습니다. 툴팁이 작동하는 꺾은 선형 차트가 있지만 어떻게 든 타임 라인 차트 만 영향을받는 것으로 보입니다. 내가 DOM으로 볼 때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에 삽입되고 있지만, 툴팁 페이지에 표시되지 다음 볼 수 있습니다 다음은 나를 위해 차트를 생성하는 기능입니다.

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

누군가 &을 디버그하는 방법에 대해이 문제를 해결할 수 있습니까?

+0

타임 라인 차트가있을 때 마우스의 초점 위치를 확인하는 것으로 시작합니다. 나는 당신이 그 (것)들에 집중할다는 것을 확인할 필요가있을 것이라는 점을 짐작하고있다. – BobbyD17

+1

테스트 페이지 또는 문제를 나타내는 전체 코드 예제가 있습니까? 나는 그것을 복제 할 수 없다. – asgallant

답변

0

나는 많은 디버깅 후에 범인을 알아 냈지만 정확한 이유는 알 수 없었다.

내 페이지에 실제로 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> 

그러나 차트를 렌더링 할 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> 

은 어쨌든 그것의 좋은 잡았다 차트의 개발자는 부트 스트랩 프레임 워크를 사용하는 경우 : 그래서이 작동하는 코드입니다.

관련 문제