Google 图表注释时间线提示未出现
我正在尝试通过 Google Charts API 实现带注释的时间线图表。我成功地让它工作，使用 AJAX 调用从数据库加载数据，但是我注意到虽然注释出现在右侧，但它们不会出现在图表上的点上方（如工具提示）。然而它们工作得很好，否则我可以点击它们，甚至可以正确地包含注释过滤器。
在一个小时左右没有看到任何错误之后，我决定回到绘图板并从 Google API 中获取图表示例代码的精确副本并进行测试。事实证明我也有同样的问题。
本教程的链接位于此处（请注意和 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>
I am trying to implement an Annotated Time Line Chart via Google Charts API. I successfully got it work, using an AJAX call to load data from a database, however I noticed that although the annotations appear on the right, they would not appear above the points on the graph ( like tool-tips). However they worked great otherwise, I could click on them and even include the Annotation filter properly.
After an hour or so of not seeing any errors, I decided to go back to the drawing board and took an exact copy of the chart example code from the Google API and test it out. It turns out I am having the same issue.
The link to the tutorial is here (notice how A and B show up on the graph itself), I also pasted the code below.
Is there some setting I'm missing or something that would be blocking this? I tested in Chrome and Firefox and neither worked. Also it works for me on the tutorial page so I'm at a loss.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我的猜测是您使用的是
https://www.google.com/jsapi而不是http://...但您的页面不在中https。还有一条评论...您使用了引号和双引号的混合，这不是很干净。
尝试遵循一个简单的规则，例如：对于 HTML，如
id="chart_div"保留双引号，对于 Javascript，保留单引号data.addColumn('date', 'Date');。My guess is that you are using
https://www.google.com/jsapiinstead ofhttp://...but your page is not inhttps.And a comment... You are using a mix of quotes and double quotes, that's not very clean.
Try to stick to a simple rule like: Keep the double quotes for HTML like
id="chart_div"and the single quote for Javascriptdata.addColumn('date', 'Date');.当我从 file:// 查看图表时，我遇到了与您相同的问题，但是当我将其上传到服务器并在 http:// 进行测试时，注释标记像预期的那样显示在时间轴上。
I had the same problem as you when I was viewing my chart from file:// but when I uploaded it to a server and tested it at http:// the annotation markers showed up on the timeline like they are supposed to.