web-dev-qa-db-ja.com

TypeError：google.visualization.DataTableはコンストラクタではありません

私のWebページには、Googleマップと3つのグラフがあります。ページがマップをロードするときは問題ありませんが、グラフがロードされないか、1つまたは2つだけがロードされます。エラーTypeError：google.visualization.DataTableはコンストラクタではありません。

function load() {
     //map object
        var MY_MAP = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });    
      //call to get and process data
      downloadUrl("Map.php", processXML);
  }  

 // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']}); 
        // Set a callback to run when the Google Visualization API is loaded. 
google.setOnLoadCallback(drawAltitudeChart());  
google.setOnLoadCallback(drawDisplacementChart());
google.setOnLoadCallback(drawDistanceChart());  



function drawAltitudeChart(){

         //console.log('hello');
         var graph = [];
          downloadUrl("Map.php", function (data){
              var xml = data.responseXML;
              var markers = xml.documentElement.getElementsByTagName("marker");
              var dataTable = new google.visualization.DataTable();
              var options = {title:'Altitude (m above sea level)', 
                  curveType:'function', 
                  legend:{position:'bottom'},
                  is3d:true     
              };
              var chart;

              for(var i = 0; i<markers.length; i++){
                  graph[i] = ['', parseInt(markers[i].getAttribute("alt"))];   
              }

              dataTable.addColumn('string', 'id');
              dataTable.addColumn('number', 'Altitude');
              dataTable.addRows(graph);


              chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
              chart.draw(dataTable, options); 

          });
      }
javascriptchartsgoogle-visualization
9
fst104

そのようなコールバックを複数追加できるとは思いません。

また、loadメソッドでコールバックを定義することもできます...

google.load('visualization', '1.0', {'packages':['corechart'], 'callback': drawCharts});

function drawCharts() {
  drawAltitudeChart();
  drawDisplacementChart();
  drawDistanceChart();
}

[〜＃〜]編集[〜＃〜]

上記のloadステートメントはolderライブラリ用です...

<script src="http://www.google.com/jsapi"></script>

リリースノート ...によると.

jsapiローダーを介して引き続き利用できるGoogleチャートのバージョンは、一貫して更新されなくなりました。これからは新しいgstaticローダーを使用してください。

newライブラリを使用しています...

<script src="https://www.gstatic.com/charts/loader.js"></script>

loadステートメントを次のように変更します...

google.charts.load('current', {'packages': ['corechart'], 'callback': drawCharts});

EDIT 2

必要なすべてのパッケージを1つのloadステートメントでロードすることもできます。
の代わりに...

google.charts.load('current', { 'packages': ['table'] });
google.charts.load('current', { 'packages': ['bar'] });
google.charts.load('current', { 'packages': ['pie'] });  // <-- 'pie' package does not exist
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawCharts);

そのはず...

google.charts.load('current', {
  callback: drawCharts,
  packages: ['bar', 'corechart', 'table']
});
14
WhiteHat

同じメッセージを受け取ったが、パッケージをロードするのを忘れたから

  // was -> google.charts.load('current', {'packages':['bar', 'corechart']});
  google.charts.load('current', {'packages':['bar', 'corechart', 'table']});
5
kztd