Googleカレンダーチャートの日付ポップアップ（ツールチップ）の問題

カレンダーチャートの日付の上にカーソルを置くと、（ツールチップのような）2番目の添付画像のようにポップアップする必要があります。チャート、私は2番目の図のように私の出力をしたい。この問題を解決するための手引きを下記に掲載しています。Googleカレンダーチャートの日付ポップアップ（ツールチップ）の問題

<script> 
     $.getScript("https://www.google.com/jsapi", function() { 
      google.load('visualization', '1.1' , { 'callback': calenderchart, 'packages': ['calendar'] }); 
     }); 

    function calenderchart(data) { 

     var dataTable = new google.visualization.DataTable(); 
     dataTable.addColumn({ type: 'date', id: 'Date' }); 
     dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); 
     dataTable.addRows([ 
      [ new Date(2012, 3, 13), 37032 ], 
      [ new Date(2012, 3, 14), 38024 ], 
      [ new Date(2012, 3, 15), 38024 ], 
      [ new Date(2012, 3, 16), 38108 ], 
      [ new Date(2012, 3, 17), 38229 ], 
      // Many rows omitted for brevity. 
      [ new Date(2013, 9, 4), 38177 ], 
      [ new Date(2013, 9, 5), 38705 ], 
      [ new Date(2013, 9, 12), 38210 ], 
      [ new Date(2013, 9, 13), 38029 ], 
      [ new Date(2013, 9, 19), 38823 ], 
      [ new Date(2013, 9, 23), 38345 ], 
      [ new Date(2013, 9, 24), 38436 ], 
      [ new Date(2013, 9, 30), 38447 ] 
     ]); 
     var chart = new  google.visualization.Calendar(document.getElementById('calendar_basic')); 
     var options = { 
      title: "", 
      tooltip: {isHtml: true} 
     }; 
     chart.draw(dataTable, options); 

    } 
</script> 
<body> 
    <div id="calendar_basic" style="width: 1000px;"ng-init ='calanderchart()'></div> 
</body>

出典

2016-06-14 Anonymous

ここで正常に動作するようです、あなたが共有することができ、よりありますか？

あなたのページにCSSがありますか？

google.load('visualization', '1.1', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable(); 
 
    dataTable.addColumn({ type: 'date', id: 'Date' }); 
 
    dataTable.addColumn({ type: 'number', id: 'Won/Loss' }); 
 
    dataTable.addRows([ 
 
     [ new Date(2012, 3, 13), 37032 ], 
 
     [ new Date(2012, 3, 14), 38024 ], 
 
     [ new Date(2012, 3, 15), 38024 ], 
 
     [ new Date(2012, 3, 16), 38108 ], 
 
     [ new Date(2012, 3, 17), 38229 ], 
 
     [ new Date(2013, 9, 4), 38177 ], 
 
     [ new Date(2013, 9, 5), 38705 ], 
 
     [ new Date(2013, 9, 12), 38210 ], 
 
     [ new Date(2013, 9, 13), 38029 ], 
 
     [ new Date(2013, 9, 19), 38823 ], 
 
     [ new Date(2013, 9, 23), 38345 ], 
 
     [ new Date(2013, 9, 24), 38436 ], 
 
     [ new Date(2013, 9, 30), 38447 ] 
 
    ]); 
 
    var chart = new google.visualization.Calendar(document.getElementById('calendar_basic')); 
 
    chart.draw(dataTable, { 
 
     tooltip: {isHtml: true} 
 
    }); 
 
    }, 
 
    packages: ['calendar'] 
 
});

<script src="https://www.google.com/jsapi"></script> 
 
<div id="calendar_basic" style="width: 1000px;"></div>

出典

2016-06-14 12:38:02 WhiteHat

申し訳ありませんが、あなたが明確になりますか？このコード取得中にエラーにこのコントローラー –

に行った別のチャートを使用して、正常に動作していますか私は従っていない... – WhiteHat

Googleカレンダーチャートの日付ポップアップ（ツールチップ）の問題

答えて

関連する問題