Jquery 谷歌图表不显示

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

我从一个ajax调用中获得一些数据,并希望显示一个关于ajax调用成功的图表。为了检查功能,我目前正在使用默认图表,并试图在图表上显示一些静态数据。 但是,当我单击元素“asSvSs”时,developer tools inspector会显示图表数据,但页面上没有显示任何内容

我做错了什么

$(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);
          }
      });
    }
  });
}

嘿,白帽。谢谢。它现在似乎工作得很好。嘿,白帽。谢谢。它现在似乎工作得很好。