谷歌日历图表日期弹出(工具提示)问题

Posted

技术标签:

【中文标题】谷歌日历图表日期弹出(工具提示)问题【英文标题】:Google calendar chart date popup(tool tip) issues 【发布时间】:2016-10-15 04:10:08 【问题描述】:

当光标放在日历图表上时,日期应该像第二个附加图像一样弹出(如工具提示),在我的代码中它显示为图表下方的(参考第一个图),我希望我的输出如第二个图所示. 请指导我解决这个问题,下面是我的代码。

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

【问题讨论】:

【参考方案1】:

这里似乎工作正常,您可以分享更多内容吗?

您的页面上有任何 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>

【讨论】:

工作正常,使用此代码在此控制器上出现另一个图表时出错

以上是关于谷歌日历图表日期弹出(工具提示)问题的主要内容,如果未能解决你的问题,请参考以下文章

jquery日历插件问题

谷歌图表:带有自定义工具提示的多行

按年份显示谷歌图表日历 DESC

如何更改工具提示文本的属性?

更改工具提示数据和 Y 轴的谷歌图表中的数字格式

jquery日历日期选择问题