谷歌圖表和谷歌表不同時顯示

我正在使用谷歌圖表和谷歌表爲我的項目。問題是，我無法在單個頁面上顯示兩個谷歌圖表和一個谷歌表格。這怎麼解決？谷歌圖表和谷歌表不同時顯示

我的代碼：

<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

來源

2016-03-08 N.Ni

顯示你的代碼。你試過了什麼？ – 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

來源

2016-03-08 12:19:31

非常感謝。 –

谷歌圖表和谷歌表不同時顯示

回答

相關問題