【发布时间】：2016-02-02 11:04:34
【问题描述】：
我正在尝试在同一页面中添加一个谷歌柱形图，然后是一个谷歌图表。在添加柱形图时它工作正常，但是一旦我添加了表格图表，我就会在谷歌柱形图的代码中得到一个错误。错误是： 您使用错误类型的数据而不是 DataTable 或 DataView 调用了 draw() 方法。
有趣的部分是，当我删除提供指向 Google 表格图表所需的 javascript 文件链接的行时，此错误就会消失。该行是：
以下是我的代码，谁能帮我解决如何在同一页面中添加谷歌柱形图和谷歌表格图？
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MyTitle</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart', 'table', 'bar']}]}"></script>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['bar']}]}"></script>
</head>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var abc = $.ajax({url:'kpi24.php',async:false,dataType:"json",}).responseText;
var data = new google.visualization.DataTable(abc);
var options = {
chart: {
title: '',
subtitle: '',
},
bars: 'vertical',
vAxis: {format: 'percent'},
legend: { position: 'right', maxLines: 3 },
colors: ['#20488D', '#EA922B']
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, options);
}
</script>
<script type="text/javascript">
google.charts.load('current', {'packages':['table']});
google.setOnLoadCallback(drawTable);
function drawTable() {
var abcnew = $.ajax({url:'kpi26.php',async:false,dataType:"json",}).responseText;
var datanew = new google.visualization.DataTable(abcnew);
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(datanew, {showRowNumber: true, width: '100%', height: '100%'});
}
</script>
<body>
<div id="wrapper">
<!-- /. NAV SIDE -->
<div class="panel panel-default">
<div class="panel-heading">
Top 5 Doctors
</div>
<div class="panel-body">
<div id="columnchart_material" style="width: 1200px; height: 300px;"></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Doctors by Hospital Revenue
</div>
<div class="panel-body">
<div id="table_div"></div>
</div>
</div>
<!-- /. ROW -->
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
【问题讨论】：
标签： google-api google-visualization