谷歌图表和谷歌表不同时显示

问题描述：

我正在使用谷歌图表和谷歌表为我的项目。问题是，我无法在单个页面上显示两个谷歌图表和一个谷歌表格。这怎么解决？谷歌图表和谷歌表不同时显示

我的代码：

<script type="text/javascript"> 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1', {'packages': ['corechart']}); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawChart); 

     function drawChart() { 

      // Create our data table out of JSON data loaded from server. 
      var data = new google.visualization.DataTable(<?= $jsonTable ?>); 
      var options = { 
       title: ' Audit Schedule ', 
       is3D: 'true', 
       width: 500, 
       height: 250 


      }; 
      // Instantiate and draw our chart, passing in some options. 
      // Do not forget to check your div ID 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 

     } 
    </script> 


    <script type="text/javascript"> 
     google.charts.load('current', {'packages': ['corechart']}); 
     google.charts.setOnLoadCallback(drawChart); 
     function drawChart() { 

      var data = google.visualization.arrayToDataTable([ 
       ['Task', 'Hours per Day'], 
       ['Work', 11], 
       ['Eat', 2], 
       ['Commute', 2], 
       ['Watch TV', 2], 
       ['Sleep', 7] 
      ]); 

      var options = { 
       title: 'My Daily Activities', 
       width: 501.2, 
       height: 250 
      }; 

      var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

      chart.draw(data, options); 
     } 

    </script> 


    <script type="text/javascript"> 
     google.charts.load('current', {'packages': ['table']}); 
     google.charts.setOnLoadCallback(drawTable); 

     function drawTable() { 
      var data = new google.visualization.DataTable(); 
      data.addColumn('string', 'Name'); 
      data.addColumn('number', 'Salary'); 
      data.addColumn('boolean', 'Full Time Employee'); 
      data.addRows([ 
       ['Mike', {v: 10000, f: '$10,000'}, true], 
       ['Jim', {v: 8000, f: '$8,000'}, false], 
       ['Alice', {v: 12500, f: '$12,500'}, true], 
       ['Bob', {v: 7000, f: '$7,000'}, true] 
      ]); 

      var table = new google.visualization.Table(document.getElementById('table_div')); 

      table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); 
     } 
    </script>

// HTML代码

        <div id="piechart" style="margin-top: -300px; margin-left:490px;"></div><br> 

            <div class="chart-wrapper"> 
             <div id="chart" style="width:1006px; height:400px; margin-left: -15px"></div> 
            </div><br> 

            <div id="table_div"></div>

链接到谷歌图表：https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart#column-styles

显示你的代码。你试过了什么？ – Deep

我刚刚编辑了我的问题。代码在那里。 –

答

你甲肝e定义了google.charts.setOnLoadCallback（）的多个实例。这个函数应该只在你的代码中定义，否则你会每次覆盖回调事件。无论如何，你应该在包装像所有的图表绘制功能：

function drawCharts(){ 
    drawchart1(); 
    drawchart2(); 
    drawwhateveryouwant(); 
    } 

    google.setOnLoadCallback(drawCharts);

而且，我可能要指出的是，你有相同的名字^^两个功能，您可能需要纠正。除此之外，您可能希望一次调用所有图表包，因为我也注意到您加载了相同的包两次，即使它不会阻止代码正常工作，这也是浪费资源：

google.load('visualization', '1', {'packages': ['corechart','table']});

我修改代码中的位，以帮助您在实现预期的效果：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 

</head> 
<body> 
    <div id="piechart"></div> 
    <div id="table_div"></div> 
</body> 
<script> 

google.charts.setOnLoadCallback(init); 
google.charts.load('current', {'packages':['corechart','table']}); 

//Function to draw piechart 
function drawChart() { 

    var data = google.visualization.arrayToDataTable([ 
     ['Task', 'Hours per Day'], 
     ['Work', 11], 
     ['Eat', 2], 
     ['Commute', 2], 
     ['Watch TV', 2], 
     ['Sleep', 7] 
    ]); 

    var options = { 
     title: 'My Daily Activities', 
     width: 501.2, 
     height: 250 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById('piechart')); 

    chart.draw(data, options); 
}; 

//Function to draw table 
function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Salary'); 
    data.addColumn('boolean', 'Full Time Employee'); 
    data.addRows([ 
     ['Mike', {v: 10000, f: '$10,000'}, true], 
     ['Jim', {v: 8000, f: '$8,000'}, false], 
     ['Alice', {v: 12500, f: '$12,500'}, true], 
     ['Bob', {v: 7000, f: '$7,000'}, true] 
    ]); 

    var table = new google.visualization.Table(document.getElementById('table_div')); 

    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); 
} 

//Function to initialize everything 
function init(){ 

    drawTable(); 
    drawChart(); 

} 

</script> 
</html>

你会原谅我跳过与JSON数据图表，虽然：p

非常感谢。 –

谷歌图表和谷歌表不同时显示

相关推荐