單個頁面上的多種Google圖表

我想在一個頁面上獲取多種類型的Google圖表。餅圖和日曆圖。當我嘗試這樣做，我得到的地方餅圖以下錯誤：單個頁面上的多種Google圖表

You called the draw() method with the wrong type of data rather than a DataTable or DataView

錯誤消失，如果我只能做一個圖表在同一時間。而且總是位於頂部的購物車顯示相同的錯誤。最好的我可以告訴它，因爲數據是不同類型的。所以我認爲它與干擾變量有關。我添加了一個潮頭標識符每個圖表的數據和我仍然得到這個問題...

這裏是我的PHP的HTML輸出：

<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
    google.load('visualization', '1', { 
     packages : [ 'corechart' ] 
    }); 
    google.setOnLoadCallback(drawChart_testGraph); 
    function drawChart_testGraph() { 

     var data_testGraph = google.visualization.arrayToDataTable([ 
       [ 'Department', 'Count' ], [ 'Accounting', 1 ], [ 'Lobby', 1 ], 
       [ 'Customer Apps', 1 ], [ 'PC Support', 0 ], 
       [ 'Collections', 0 ], [ 'Inventory', 1 ], [ 'Billing', 0 ], 
       [ 'Executive', 4 ], [ 'Customer Service', 0 ], 
       [ 'Sales and Marketing', 0 ], [ 'Product and Development', 1 ], 
       [ 'Materials Management', 0 ], [ 'Remittance', 0 ], 
       [ 'Support Services', 0 ], [ 'Indirect Distribution', 1 ], 
       [ 'Provisioning Support', 1 ], ]); 

     var options_testGraph = { 
      title : 'Usage by department', 
      backgroundColor : 'transparent', 
      is3D : 'false', 
     }; 

     var chart_testGraph = new google.visualization.PieChart(document 
       .getElementById('testGraph')); 

     chart_testGraph.draw(data_testGraph, options_testGraph); 
     console.log(data_testGraph); 
    } 
</script> 
<div id='testGraph' style='width: 900px; height: 500px;'></div> 
<script type='text/javascript' src='https://www.google.com/jsapi'></script> 
<script type='text/javascript'> 
    google.load('visualization', '1.1', { 
     packages : [ 'calendar' ] 
    }); 
    google.setOnLoadCallback(drawChart_testGraph2); 
    function drawChart_testGraph2() { 

     var dataTable_testGraph2 = new google.visualization.DataTable(); 
     dataTable_testGraph2.addColumn({ 
      type : 'date', 
      id : 'Department' 
     }); 
     dataTable_testGraph2.addColumn({ 
      type : 'number', 
      id : 'Count' 
     }); 
     dataTable_testGraph2.addRows([ [ new Date('2014, 09, 18'), 1 ], 
       [ new Date('2014, 09, 17'), 1 ], 
       [ new Date('2014, 09, 15'), 6 ], 
       [ new Date('2014, 09, 13'), 1 ], 
       [ new Date('2014, 09, 12'), 2 ], ]); 

     var options_testGraph2 = { 
      title : 'Usage by department', 
      backgroundColor : 'white', 
      is3D : 'false', 
     }; 

     var chart_testGraph2 = new google.visualization.Calendar(document 
       .getElementById('testGraph2')); 

     chart_testGraph2.draw(dataTable_testGraph2, options_testGraph2); 

    } 
</script> 
<div id='testGraph2' style='width: 900px; height: 500px;'></div> 
</div>

任何想法？

來源

2014-09-26 alexander7567

你只需要添加'<腳本類型= '文/ JavaScript的' SRC =的 'https：//www.google.com/jsapi'>'一次到你的頁面。 – Robbert 2014-09-26 18:32:03

@Robbert我知道，它只是我PHP腳本中的邏輯。我將來會做的事情，但我測試了它，並沒有影響到這個問題。 – alexander7567 2014-09-26 18:33:53

這很有趣，我在YouTube分析中遇到同樣的問題！向那裏的開發團隊吶喊。 – towerofnix 2016-07-15 20:16:29

這不是正確的方式來加載谷歌包，你試圖加載谷歌可視化包2次，所以第二個覆蓋第一個。您需要刪除第二個加載並在第一個腳本中加載：（或同時加載2次）

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

來源

2014-09-26 18:35:48 juvian

我創建了一個[jsfiddle]（http://jsfiddle.net/63brwLoa/），只要你用這種方式使用包，就能顯示代碼的工作原理。 – Robbert 2014-09-26 18:36:46

謝謝！現在你指出了，我知道那條線實際上意味着什麼:) – alexander7567 2014-09-26 18:39:03

謝謝你做的小提琴@羅伯特 – juvian 2014-09-26 18:51:22

您可以回退舊版本。只需更改鏈接上的js文件的版本號。

version':'1.1到version':'1

像：<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>

來源

2016-04-12 15:11:06

單個頁面上的多種Google圖表

回答

相關問題