Jquery 谷歌图表不显示
我从一个ajax调用中获得一些数据,并希望显示一个关于ajax调用成功的图表。为了检查功能,我目前正在使用默认图表,并试图在图表上显示一些静态数据。 但是,当我单击元素“asSvSs”时,developer tools inspector会显示图表数据,但页面上没有显示任何内容 我做错了什么Jquery 谷歌图表不显示,jquery,ajax,charts,google-visualization,Jquery,Ajax,Charts,Google Visualization,我从一个ajax调用中获得一些数据,并希望显示一个关于ajax调用成功的图表。为了检查功能,我目前正在使用默认图表,并试图在图表上显示一些静态数据。 但是,当我单击元素“asSvSs”时,developer tools inspector会显示图表数据,但页面上没有显示任何内容 我做错了什么 $(document).on('click', '.asDvSs', function(e){ var uid = $('#sesval').data('uid'); var apikey = $('#s
$(document).on('click', '.asDvSs', function(e){
var uid = $('#sesval').data('uid');
var apikey = $('#sesval').data('key');
var gateway_id = $(this).data('gateway_id');
var device_id = $(this).data('device_id');
var device_type = $(this).data('device_type');
if(uid!= '' && apikey!= '') {
$.ajax({
url: basePathUser + apiUrlAnalyticsDeviceSensorData + '/' + gateway_id + '/' + device_id + '/' + device_type,
type: 'GET',
headers: {
'uid': uid,
'Api-Key': apikey
},
contentType: 'application/json; charset=utf-8;',
dataType: 'json',
async: false,
beforesend: function(xhr){
setRequestHeader("uid", uid);
setRequestHeader("Api-Key", apikey);
},
success: function(data, textStatus, xhr) {
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Temperature Streaming',
width: 900,
height: 500,
hAxis: {
title: 'time'
},
vAxis: {
title: 'device_value'
}
};
var chart = new google.visualization.LineChart(document.getElementById('countries'));
chart.draw(data, options);
}
}
});
}
});
建议先加载google,
每次页面加载只需执行一次,
每个图表一次也没有 尝试以下类似的设置
google.charts.load('current', {
callback: loadPage,
packages: ['corechart']
});
function loadPage() {
$(document).on('click', '.asDvSs', function(e){
var uid = $('#sesval').data('uid');
var apikey = $('#sesval').data('key');
var gateway_id = $(this).data('gateway_id');
var device_id = $(this).data('device_id');
var device_type = $(this).data('device_type');
if(uid!= '' && apikey!= '') {
$.ajax({
url: basePathUser + apiUrlAnalyticsDeviceSensorData + '/' + gateway_id + '/' + device_id + '/' + device_type,
type: 'GET',
headers: {
'uid': uid,
'Api-Key': apikey
},
contentType: 'application/json; charset=utf-8;',
dataType: 'json',
async: false,
beforesend: function(xhr){
setRequestHeader("uid", uid);
setRequestHeader("Api-Key", apikey);
},
success: function(data, textStatus, xhr) {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Temperature Streaming',
width: 900,
height: 500,
hAxis: {
title: 'time'
},
vAxis: {
title: 'device_value'
}
};
var chart = new google.visualization.LineChart(document.getElementById('countries'));
chart.draw(data, options);
}
});
}
});
}
建议先加载google,
每次页面加载只需执行一次,
每个图表一次也没有 尝试以下类似的设置
google.charts.load('current', {
callback: loadPage,
packages: ['corechart']
});
function loadPage() {
$(document).on('click', '.asDvSs', function(e){
var uid = $('#sesval').data('uid');
var apikey = $('#sesval').data('key');
var gateway_id = $(this).data('gateway_id');
var device_id = $(this).data('device_id');
var device_type = $(this).data('device_type');
if(uid!= '' && apikey!= '') {
$.ajax({
url: basePathUser + apiUrlAnalyticsDeviceSensorData + '/' + gateway_id + '/' + device_id + '/' + device_type,
type: 'GET',
headers: {
'uid': uid,
'Api-Key': apikey
},
contentType: 'application/json; charset=utf-8;',
dataType: 'json',
async: false,
beforesend: function(xhr){
setRequestHeader("uid", uid);
setRequestHeader("Api-Key", apikey);
},
success: function(data, textStatus, xhr) {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Temperature Streaming',
width: 900,
height: 500,
hAxis: {
title: 'time'
},
vAxis: {
title: 'device_value'
}
};
var chart = new google.visualization.LineChart(document.getElementById('countries'));
chart.draw(data, options);
}
});
}
});
}
嘿,白帽。谢谢。它现在似乎工作得很好。嘿,白帽。谢谢。它现在似乎工作得很好。