谷歌日历图表日期弹出（工具提示）问题

Question

When the cursor is placed over the calendar chart date should be popup like second attached image (like tool-tip), in my code it showing like (refer First figure)below the chart, I want my output as in Second Figure. 当光标放在日历图表上时，日期应该像第二个附加图像一样弹出（如工具提示），在我的代码中它显示为（参见图中的第一个图），我希望我的输出如第二个图所示。 Please guide me to fix this issue, and below is see my code. 请指导我解决此问题，下面是我的代码。

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

Answer 1

seems to work fine here, is there more you can share? 似乎在这里工作正常，你可以分享更多吗？

any CSS on your page? 你网页上的任何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>

谷歌日历图表日期弹出（工具提示）问题

问题描述

1 个解决方案

解决方案1
0 2016-06-14 12:38:02

谷歌日历图表日期弹出（工具提示）问题

问题描述

1 个解决方案

解决方案1 0 2016-06-14 12:38:02

解决方案1
0 2016-06-14 12:38:02