Uncaught TypeError: string is not a function - on google Chart
Uncaught TypeError: string is not a function - on google Chart
您好,我有 2 个 google 图表(一个日历和另一个折线图),我正在获取 Uncaught TypeError: string is not a function
和 Uncaught TypeError: undefined is not a function
。昨天它工作正常,我可以看到这两个,但今天我得到这个错误,我只能显示一个字符或日历。在单独的文件中,我没有收到任何错误,我修改了 json,它显示了我想要检索的数据。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});
google.load("visualization", "1.1", {packages:["calendar"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);
function drawCalendar() {
$.ajax({
url: 'getCalendario.php',
dataType: 'json',
success: function (jsonData) {
var options = {
title: "Calendario",
height: 200,
daysOfWeek: 'LMMJVSD'
};
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
// Instantiate and draw our chart, passing in some options.
chart.draw(data, options);
}
});
$.ajax({
url: 'getChart.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var options = {
title: 'Estado de Bateria',
width: 800,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100,
}
};
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chartBat = new google.visualization.LineChart(document.getElementById('battery'));
chartBat.draw(data, options);
}
});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="calendar" ></div>
<div id="battery"></div>
</body>
</html>
控制台图片
此代码正在运行并绘制了两个图表,问题是您忘记加载折线图依赖项。
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});
google.load("visualization", "1.1", {packages:["calendar"]});
google.load("visualization", "1.1", {packages:["linechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);
function drawCalendar() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'X');
data.addRows([
[new Date(2008, 0, 1), 1],
[new Date(2008, 1, 14), 2],
[new Date(2008, 9, 14), 12],
[new Date(2008, 10, 14), 22],
[new Date(2009, 1, 1), 30]
]);
// Create our data table out of JSON data loaded from server.
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
// Instantiate and draw our chart, passing in some options.
chart.draw(data, options);
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'Date');
data2.addColumn('number', 'X');
data2.addRows([
[new Date(2008, 0, 1), 1],
[new Date(2008, 1, 14), 2],
[new Date(2008, 9, 14), 12],
[new Date(2008, 10, 14), 22],
[new Date(2009, 1, 1), 30]
]);
var options = {
title: 'Estado de Bateria',
width: 800,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100
}
};
// Instantiate and draw our chart, passing in some options.
var chartBat = new google.visualization.LineChart(document.getElementById('battery'));
chartBat.draw(data2, options);
}
您好,我有 2 个 google 图表(一个日历和另一个折线图),我正在获取 Uncaught TypeError: string is not a function
和 Uncaught TypeError: undefined is not a function
。昨天它工作正常,我可以看到这两个,但今天我得到这个错误,我只能显示一个字符或日历。在单独的文件中,我没有收到任何错误,我修改了 json,它显示了我想要检索的数据。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});
google.load("visualization", "1.1", {packages:["calendar"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);
function drawCalendar() {
$.ajax({
url: 'getCalendario.php',
dataType: 'json',
success: function (jsonData) {
var options = {
title: "Calendario",
height: 200,
daysOfWeek: 'LMMJVSD'
};
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
// Instantiate and draw our chart, passing in some options.
chart.draw(data, options);
}
});
$.ajax({
url: 'getChart.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var options = {
title: 'Estado de Bateria',
width: 800,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100,
}
};
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chartBat = new google.visualization.LineChart(document.getElementById('battery'));
chartBat.draw(data, options);
}
});
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="calendar" ></div>
<div id="battery"></div>
</body>
</html>
控制台图片
此代码正在运行并绘制了两个图表,问题是您忘记加载折线图依赖项。
// Load the Visualization API and the piechart package.
google.load('visualization', '1', {'packages':["corechart"]});
google.load("visualization", "1.1", {packages:["calendar"]});
google.load("visualization", "1.1", {packages:["linechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawCalendar);
function drawCalendar() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'X');
data.addRows([
[new Date(2008, 0, 1), 1],
[new Date(2008, 1, 14), 2],
[new Date(2008, 9, 14), 12],
[new Date(2008, 10, 14), 22],
[new Date(2009, 1, 1), 30]
]);
// Create our data table out of JSON data loaded from server.
var chart = new google.visualization.Calendar(document.getElementById('calendar'));
// Instantiate and draw our chart, passing in some options.
chart.draw(data, options);
var data2 = new google.visualization.DataTable();
data2.addColumn('date', 'Date');
data2.addColumn('number', 'X');
data2.addRows([
[new Date(2008, 0, 1), 1],
[new Date(2008, 1, 14), 2],
[new Date(2008, 9, 14), 12],
[new Date(2008, 10, 14), 22],
[new Date(2009, 1, 1), 30]
]);
var options = {
title: 'Estado de Bateria',
width: 800,
height: 400,
vAxis: {
minValue: 0,
maxValue: 100
}
};
// Instantiate and draw our chart, passing in some options.
var chartBat = new google.visualization.LineChart(document.getElementById('battery'));
chartBat.draw(data2, options);
}