私の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);
});
}
そのようなコールバックを複数追加できるとは思いません。
また、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']
});
同じメッセージを受け取ったが、パッケージをロードするのを忘れたから
// was -> google.charts.load('current', {'packages':['bar', 'corechart']});
google.charts.load('current', {'packages':['bar', 'corechart', 'table']});