加载第三个Google图表时出现问题
[英]Problems loading the third google chart
问题描述
I am trying to load three different google charts on page, one gauge, one line and one bar chart. 
我正在尝试在页面上加载三种不同的Google图表，一种量规，一种折线和一种条形图。 But something fails when i try to implement the third chart. 但是当我尝试实现第三个图表时，某些操作失败了。 Sometimes the gauge chart and the line chart loads but not the bar chart, other times only the gauge and the bar chart loads. 有时会加载仪表图和折线图，但不会加载条形图，而其他时候仅加载仪表图和条形图。 I cant get all three to load at the same time. 我不能同时加载所有三个。 Can i please get some help? 我可以帮忙吗？
Here is my code: 这是我的代码：
<html> <head> <title>Usage statistic</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", { packages: ["corechart", "gauge", "line", "bar"], 'language': 'no' }); google.setOnLoadCallback(init); function init() { drawLine(); drawBar(); drawGauge(); } function drawGauge() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Month', 73.6], ['Today', 62.7], ['Week', 73.6], ]); var options = { width: 800, height: 240, greenFrom: 40, greenTo: 100, redFrom: 0, redTo: 20, yellowFrom: 20, yellowTo: 40, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('gauge_div')); chart.draw(data, options); } function drawLine() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Date'); data.addColumn('number', 'Logins'); data.addRows([ [new Date(2015, 10, 16), 1971], [new Date(2015, 10, 17), 1973], [new Date(2015, 10, 18), 1964], [new Date(2015, 10, 19), 1981], [new Date(2015, 10, 20), 1919], [new Date(2015, 10, 21), 1185], [new Date(2015, 10, 22), 1104], [new Date(2015, 10, 23), 2009], [new Date(2015, 10, 24), 1955], [new Date(2015, 10, 25), 1933], [new Date(2015, 10, 26), 1923], [new Date(2015, 10, 27), 1854], [new Date(2015, 10, 28), 1159], [new Date(2015, 10, 29), 1107], [new Date(2015, 10, 30), 2006], [new Date(2015, 11, 01), 1998], [new Date(2015, 11, 02), 1951], [new Date(2015, 11, 03), 1921], [new Date(2015, 11, 04), 1870], [new Date(2015, 11, 05), 1174], [new Date(2015, 11, 06), 1128], [new Date(2015, 11, 07), 2030], [new Date(2015, 11, 08), 1912], [new Date(2015, 11, 09), 1956], [new Date(2015, 11, 10), 1942], [new Date(2015, 11, 11), 1895], [new Date(2015, 11, 12), 1168], [new Date(2015, 11, 13), 1148], [new Date(2015, 11, 14), 2004], [new Date(2015, 11, 15), 1954], ]); var options = { title: 'Logins', width: 800, height: 400, hAxis: { format: 'MMM d, y', gridlines: { count: 15 } }, vAxis: { gridlines: { color: 'none' }, minValue: 0 } }; var chart = new google.charts.Line(document.getElementById('line_div')); chart.draw(data, options); } function drawBar() { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Emails Received'); data.addRows([ [ [8, 30, 45], 5 ], [ [9, 0, 0], 10 ], [ [10, 0, 0, 0], 12 ], [ [10, 45, 0, 0], 13 ], [ [11, 0, 0, 0], 15 ], [ [12, 15, 45, 0], 20 ], [ [13, 0, 0, 0], 22 ], [ [14, 30, 0, 0], 25 ], [ [15, 12, 0, 0], 30 ], [ [16, 45, 0], 32 ], [ [16, 59, 0], 42 ] ]); var options = google.charts.Bar.convertOptions({ title: 'Total Emails Received Throughout the Day', width: 800, height: 400 }); var chart = new google.charts.Bar(document.getElementById('bar_div')); chart.draw(data, options); } </script> <style> .menu { border-radius: 5px; border: 1px solid black; float: left; padding: 0px 6px; margin-right: 6px; color: #686868; } .menu a { text-decoration: none; color: #686868; } .active a { color: black !important; } </style> </head> <body style="background-color: #F0F0F0; margin: 20px;"> <div> <h2>Logins in percentages</h2> </div> <div id="gauge_div"></div> <div> <h2>Logins last 30 days</h2> </div> <div id="line_div"></div> <div> <h2>Emails Received</h2> </div> <div id="bar_div"></div> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2015-12-16 11:42:53
I can't really answer why, but if you look at the documentation for loading libraries link , you see that they have updated how it's done. 我不能真正回答为什么，但是如果您查看有关加载库链接的文档，您会发现它们已经更新了完成方式。 And it's quite differente from before. 它与以前有很大的不同。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "gauge", "line", "bar"],
'language': 'no'
});
google.setOnLoadCallback(init);
would have to be changed to 将不得不更改为
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages: ["corechart", "gauge", "line", "bar"]});
google.charts.setOnLoadCallback(init);
....
</script>
It looks like everything is still working in my applications, with the old loading style, but trying your scenario didn't work at all with the old style. 看起来旧的加载样式中的所有内容仍在我的应用程序中正常工作，但是尝试使用旧的加载方式完全不起作用。 Changeing it to the new one works. 将其更改为新的作品。
EDIT: 编辑：
If anyone is interested I found out why my things are working. 如果有人感兴趣，我会找出为什么我的东西起作用。 I'm working exclusively with Wrappers, and apparantly you should use google.load (the old way) and not the new google.charts.load . 我专门与Wrappers合作，显然您应该使用google.load （旧方法）而不是新的google.charts.load 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.