2011-01-03 24 views
1

Google Charts APIを使用して注釈付きタイムラインチャートを実装しようとしています。 AJAX呼び出しを使用してデータベースからデータを読み込むことに成功しましたが、右に注釈が表示されても、グラフ上の点の上には表示されません(ツールチップなど)。しかし、彼らは素晴らしい仕事をしました。私はそれらをクリックして、Annotationフィルタを適切に組み込むことさえできました。Google Charts注釈付きタイムラインヒントが表示されない

エラーが表示されないうちに1時間ほど経った後、私は描画ボードに戻り、Google APIからチャートのサンプルコードを正確にコピーしてテストしました。私は同じ問題を抱えていることが分かります。

チュートリアルへのリンクは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> 

答えて

7

私の推測ではなくhttp://...のおhttps://www.google.com/jsapiを使用していることですが、あなたのページがhttpsではありません。

コメント...引用符と二重引用符を混ぜて使用していますが、これはあまりクリーンではありません。
次のような単純なルールに従ってください。id="chart_div"のようなHTMLの二重引用符と、Javascriptの一重引用符data.addColumn('date', 'Date');をそのまま使用してください。

+0

ありがとうございました。私は通常、「何も補間されていなければ、一重引用符を使用する」というルールに従います。 < - 一重引用符LOL。私はテストのためにGoogleのコードをコピーしました。 – user387049

1

file://からグラフを表示していたときと同じ問題が発生しましたが、サーバーにアップロードしてhttp://でテストしたときに、アノテーションマーカーが想定されているようにタイムラインに表示されましたに。

関連する問題