Google api 如何在同一页面中添加谷歌柱形图和谷歌表格图？_Google Api_Google Visualization

Google api 如何在同一页面中添加谷歌柱形图和谷歌表格图？

google-api google-visualization

Google api 如何在同一页面中添加谷歌柱形图和谷歌表格图？,google-api,google-visualization,Google Api,Google Visualization,我正在尝试在同一页中添加一个google柱形图，后跟一个google表格图。添加柱状图时效果很好，但一旦添加了表格图，google柱状图的代码中就会出现错误。错误是：调用draw（）方法时使用了错误的数据类型，而不是DataTable或DataView 有趣的是，当我删除了一行代码，该代码提供了指向谷歌表格图表所需的javascript文件的链接时，这个错误就消失了。电话是：下面是我的代码，谁能帮我解决如何在同一页面中添加谷歌柱形图和谷歌表格图 <!DOCTYPE html> &

我正在尝试在同一页中添加一个google柱形图，后跟一个google表格图。添加柱状图时效果很好，但一旦添加了表格图，google柱状图的代码中就会出现错误。错误是：调用draw（）方法时使用了错误的数据类型，而不是DataTable或DataView

有趣的是，当我删除了一行代码，该代码提供了指向谷歌表格图表所需的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>


我的头衔
load（“可视化”、“1.1”、{packages:[“bar”]}）；
setOnLoadCallback（drawChart1）；
函数drawChart1（）{
var abc=$.ajax（{url:'kpi24.php'，async:false，数据类型：“json”，}）；
var data=newgoogle.visualization.DataTable（abc）；
变量选项={
图表：{
标题：“”，
副标题：“”，
},
酒吧：“垂直”，
变量：{格式：'百分比'}，
图例：{位置：'右'，最大线：3}，
颜色：['#20488D'，'#EA922B']
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
图表绘制（数据、选项）；
}
load（'current'，{'packages'：['table']}）；
setOnLoadCallback（drawTable）；
函数drawTable（）{
var abcnew=$.ajax（{url:'kpi26.php'，async:false，数据类型：“json”，}）；
var datanew=新的google.visualization.DataTable（abcnew）；
var table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（datanew，{showRowNumber:true，宽度：'100%，高度：'100%}）；
}
前五名医生
按医院收入划分的医生

谷歌

加载次数太多。

google.load

和

google.setOnLoadCallback

只能调用一次

物料柱形图和表格图所需的包装为

条形图

和

表格

在这里，我删除了两个

自动加载

脚本，并在柱状图之后绘制了表格

另外，我建议将

标记添加到

或

中


我的头衔
load（“可视化”，“1.1”，“{packages:[“bar”，“table”]}）；
setOnLoadCallback（drawChart1）；
函数drawChart1（）{
var abc=$.ajax（{url:'kpi24.php'，async:false，数据类型：“json”，}）；
var data=newgoogle.visualization.DataTable（abc）；
变量选项={
图表：{
标题：“”，
副标题：“”，
},
酒吧：“垂直”，
变量：{格式：'百分比'}，
图例：{位置：'右'，最大线：3}，
颜色：['#20488D'，'#EA922B']
};
var chart=new google.charts.Bar（document.getElementById（'columnchart_material'）；
图表绘制（数据、选项）；
//绘制图表
绘图台（）；
}
函数drawTable（）{
var abcnew=$.ajax（{url:'kpi26.php'，async:false，数据类型：“json”，}）；
var datanew=新的google.visualization.DataTable（abcnew）；
var table=新的google.visualization.table（document.getElementById（'table_div'）；
table.draw（datanew，{showRowNumber:true，宽度：'100%，高度：'100%}）；
}

如果不使用，则无需加载www.gstatic.com/charts/loader.js。如果要使用它，需要更改google.load（）和google.setOnLoadCallback（）调用。请参见此处的文档：

<!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 src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>

  <script type="text/javascript">
    google.load("visualization", "1.1", {packages:["bar", "table"]});
    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);

      // draw table chart
      drawTable();
    }
  </script>

  <script type="text/javascript">
    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>
</head>