Графики Google Аннотированные подсказки линии времени не отображаются

Я пытаюсь реализовать аннотированную диаграмму времени с помощью API графиков Google. Я успешно получил его работу, используя вызов AJAX для загрузки данных из базы данных, однако я заметил, что хотя аннотации появляются справа, они не будут отображаться над точками на графике (например, подсказки). Однако они отлично работали, я мог нажимать на них и даже правильно включать фильтр аннотации.Графики Google Аннотированные подсказки линии времени не отображаются

По прошествии часа или около того не было никаких ошибок, я решил вернуться к чертежной доске и взял точную копию кода примера диаграммы из API Google и протестировал его. Оказывается, у меня такая же проблема.

Ссылка на учебное пособие: here (обратите внимание, как A и B отображаются на самом графике), я также вставил код ниже.

Есть ли какие-то настройки, которые у меня отсутствуют или что-то, что блокирует это? Я тестировал в Chrome и Firefox и не работал. Также он работает для меня на странице учебника, чтобы я был в недоумении.

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

И комментарий ... Вы используете сочетание цитат и двойных кавычек, это не очень чисто.
Попробуйте придерживаться простого правила: держите двойные кавычки для HTML, например id="chart_div", и одинарной кавычки для Javascript data.addColumn('date', 'Date');.

источник

2011-01-03 22:02:23 Mic

Спасибо за помощь. Обычно я придерживаюсь правила: «Если ничто не интерполируется, используйте одиночные кавычки». <- Single Quotes LOL. Я скопировал код Google для тестирования. – user387049

У меня была такая же проблема, как и вы, когда я просматривал свою диаграмму из файла: //, но когда я загрузил ее на сервер и протестировал ее по адресу http: // маркеры аннотаций появились на временной шкале, как и предполагалось к.

источник

2013-05-07 01:15:32 user1301877

Графики Google Аннотированные подсказки линии времени не отображаются

ответ

Смежные вопросы