Google Charts 주석이 달린 타임 라인 팁이 보이지 않음

Google Charts API를 통해 주석 된 타임 라인 차트를 구현하려고합니다. 나는 데이터베이스에서 데이터를로드하기 위해 AJAX 호출을 사용하여 작업을 성공적으로 수행했지만, 주석이 오른쪽에 표시 되더라도 도구 팁과 같은 그래프의 점 위에 나타나지는 않을 것으로 나타났습니다. 그러나 그들은 훌륭하게 작동 했으므로 클릭 할 수 있었으며 Annotation 필터를 올바르게 포함 할 수도있었습니다.Google Charts 주석이 달린 타임 라인 팁이 보이지 않음

오류가 표시되지 않은 채 1 시간 정도 지난 후 도면 게시판으로 돌아가서 Google API에서 차트 예제 코드의 사본을 가져 와서 테스트 해 보았습니다. 나는 똑같은 문제가 있음을 알게되었다.

튜토리얼에 대한 링크는 here입니다 (A와 B가 그래프 자체에 나타나는 것을 확인하십시오). 아래 코드도 붙여 넣었습니다.

일부 설정이 누락되었거나 차단할 수 있습니까? 크롬과 파이어 폭스에서 테스트를 해봤는데 어느 것도 작동하지 않았다. 또한 그것은 자습서 페이지에서 나를 위해 작동하므로 잃어 버리게됩니다.

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Google Charts Example</title> 

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

     <script type='text/javascript'> 
       google.load('visualization', '1', {'packages':['annotatedtimeline']}); 
       google.setOnLoadCallback(drawChart); 


     function drawChart() { 
     var data = new google.visualization.DataTable(); 

     data.addColumn('date', 'Date'); 
     data.addColumn('number', 'Sold Pencils'); 
     data.addColumn('string', 'title1'); 
     data.addColumn('string', 'text1'); 
     data.addColumn('number', 'Sold Pens'); 
     data.addColumn('string', 'title2'); 
     data.addColumn('string', 'text2'); 

     data.addRows([ 
      [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined], 
      [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined], 
      [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined], 
      [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'], 
      [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined], 
      [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined] 
     ]); 

     var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); 
     chart.draw(data, {displayAnnotations: true}); 
     } 
     </script> 
    </head> 
    <body> 

    <div id='chart_div' style='width: 80%; height: 50%;'></div> 

     </body> 
</html>

출처

2011-01-03 user387049

내 생각 엔 당신이 https://www.google.com/jsapi 대신 http://...의 사용하지만 페이지가 https하지 않을 것입니다.

그리고 의견 ... 따옴표와 큰 따옴표를 혼합하여 사용하고 있습니다. 그다지 깨끗하지는 않습니다.
다음과 같은 간단한 규칙을 따르십시오. id="chart_div"과 같은 큰 따옴표와 자바의 작은 따옴표 (예 : data.addColumn('date', 'Date');)를 사용하십시오.

출처

2011-01-03 22:02:23 Mic

도움 주셔서 감사합니다. 나는 보통 규칙에 따라 간다. '아무 것도 보간되지 않으면 작은 따옴표를 사용한다.' <- 작은 따옴표 LOL. 테스트 용 Google 코드를 복사했습니다. – user387049

file : //에서 차트를 볼 때와 같은 문제가 있었지만 서버에 업로드하여 http : //에서 테스트했을 때 주석 마커가 타임 라인에 나타났습니다 에.

출처

2013-05-07 01:15:32 user1301877

Google Charts 주석이 달린 타임 라인 팁이 보이지 않음

답변

관련 문제