javascript - Google 日历图表日期弹出窗口(工具提示)问题

标签 javascript google-visualization jsapi

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

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

enter image description here

enter image description here

最佳答案

似乎在这里工作得很好,你有更多的可以分享吗?

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

关于javascript - Google 日历图表日期弹出窗口(工具提示)问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37811804/

相关文章:

javascript - 如何为柱形图中的条形图添加不同的颜色

charts - 如何在谷歌图表中带来 3D 效果?

javascript - 如何使整个div可点击

javascript - 构建插件架构

javascript - 维基语录 API "Batch Complete"

javascript - Vuex 观察者错误地触发了两次

javascript - 可以在 Google Charts 中生成该 Char 吗?

javascript - 如果行为空,则隐藏或删除 Google 图表中的列

ubuntu-12.04 - 尝试在 sphinx4 中提取 jsapi.jar 时出现有关 uudecode 的错误

text-to-speech - 使用 JSAPI 将文本转换为语音时排查 "System property mbrola.base is undefined. Will not use MBROLA voices"问题