谷歌图表不显示

Question

我正在从 ajax 调用中获取一些数据，并希望显示一个关于 ajax 调用成功的图表。检查我目前使用默认图表并尝试在图表上显示一些静态数据的功能。 但是当我单击元素“asSvSs”时，开发人员工具检查器会显示图表数据，但页面上没有显示任何内容。

我做错了什么？

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

}
        }
    });
}
});

Answer 1

建议先加载谷歌，
每次页面加载只需要发生一次，
每张图表不是一次

尝试类似于以下的设置...

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