Google图表带注释的时间线提示未显示-Java 学习之路

我正在尝试通过Google Charts API实现带注释的时间线图表 . 我成功地使用AJAX调用从数据库加载数据，但是我注意到虽然注释显示在右侧，但它们不会出现在图形上的点之上（如工具提示） . 然而，他们工作得很好，我可以点击它们甚至正确包含Annotation过滤器 .

在一两个小时左右没有看到任何错误后，我决定回到绘图板并从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>

2 回答

1

我的猜测是你使用 https://www.google.com/jsapi 而不是 http://... ，但你的页面不在 https 中 .

并且评论......你正在使用引号和双引号的混合，这不是很干净 .
尝试坚持一个简单的规则，例如：保留HTML的双引号，如 id="chart_div" 和Javascript data.addColumn('date', 'Date'); 的单引号 .

回复于 2024-05-06T08:27:23+08:00
7

当我从file：//查看我的图表时，我遇到了同样的问题，但是当我将其上传到服务器并在http：//进行测试时，注释标记出现在时间轴上，就像它们应该的那样 .

回复于 2024-05-06T08:27:23+08:00

Google图表带注释的时间线提示未显示

2 回答

相关问题