Javascript 从jquery.post（）函数获得响应后如何加载google图表？

我正在开发一个用户界面，用户可以选择开始日期和结束日期来检索数据。其中一些数据显示在表格中，我想显示一个与这些数据相关的谷歌图表

当用户最终选择日期时，我使用

$.post（）

函数发送这两个变量，如下所示：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>

$('#button-send').click(function() {
    var url_route = "{{URL::action('Controller@general_stats_post')}}";
    var start_date=$('#start_date_i').val();
    var end_date=$('#end_date_i').val();
    var datos = {start_date: start_date, end_date:end_date,_token:_token};

        $.post(url_route, datos, function(data,status){
          if(status=='success'){
            console.log('Dates sent successfully. Now the data retrieved are: '+data);
            var response = jQuery.parseJSON(data);
            if(response.events_types.length === 0){
                console.log('events_types is empty.');
            }
            else{
            console.log('The string for google charts got is: `'+response.events_types+'`');
            /*GOOGLE CHART*/
    google.setOnLoadCallback(drawChart);
    function drawChart() {
   console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable(response.events_types);
    var options = {
       title: 'My test'
                };

    var chart = new google.visualization.PieChart(document.getElementById('eventos_charts'));
    chart.draw(data, options);
     }  
            /*END OF GOOGLE CHART PART*/
            }
          }else if(status=='error'){
            console.log('Errors found');
          }
         });//end of .post() function
        }); //end of onclick button-send

事件类型字符串是，例如：

[['Event','Total'],['Workshop',1],['Seminar',1]]

这在我的工作中非常有效

因此，我一直在尝试将google chart的drawChart（）函数放在{}中，其中字符串events_类型确实存在，如下所示：

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>

$('#button-send').click(function() {
    var url_route = "{{URL::action('Controller@general_stats_post')}}";
    var start_date=$('#start_date_i').val();
    var end_date=$('#end_date_i').val();
    var datos = {start_date: start_date, end_date:end_date,_token:_token};

        $.post(url_route, datos, function(data,status){
          if(status=='success'){
            console.log('Dates sent successfully. Now the data retrieved are: '+data);
            var response = jQuery.parseJSON(data);
            if(response.events_types.length === 0){
                console.log('events_types is empty.');
            }
            else{
            console.log('The string for google charts got is: `'+response.events_types+'`');
            /*GOOGLE CHART*/
    google.setOnLoadCallback(drawChart);
    function drawChart() {
   console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable(response.events_types);
    var options = {
       title: 'My test'
                };

    var chart = new google.visualization.PieChart(document.getElementById('eventos_charts'));
    chart.draw(data, options);
     }  
            /*END OF GOOGLE CHART PART*/
            }
          }else if(status=='error'){
            console.log('Errors found');
          }
         });//end of .post() function
        }); //end of onclick button-send

我放了一条console.log消息，让我知道drawChart（）已经运行。然而，我从来没有得到这个信息。这意味着drawChart（）函数永远不会运行：/I卡住了

几乎正常工作-编辑

这是正在工作的代码。。。但仅当我手动定义数据字符串时，即：

else{
 console.log('The data string is: `'+response.tipos_eventos+'`');
 var the_string=response.tipos_eventos;
/***** start Google charts:*******/
 //google.setOnLoadCallback(drawChart);
  function drawChart() {
    console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable([['Evento','Cantidad'],['Taller',1],['Seminario',1]]);//DEFINED MANUALLY

 var options = {
   title: 'The chart'
   };
  var chart = new google.visualization.PieChart(document.getElementById('events_types'));

  chart.draw(data, options);
 }
 drawChart();//Thanks to @FABRICATOR                                

/****  END Google charts: Events types *********/                               
}

但是，如果我尝试动态获取数据：

else{
 console.log('The data string is: `'+response.tipos_eventos+'`');
 var the_string=response.tipos_eventos;
/***** start Google charts:*******/
 //google.setOnLoadCallback(drawChart);
  function drawChart() {
    console.log('Inside the drawChart() function');
    var data = google.visualization.arrayToDataTable(the_string);//DEFINED DYNAMICALLY

 var options = {
   title: 'The chart'
   };
  var chart = new google.visualization.PieChart(document.getElementById('events_types'));

  chart.draw(data, options);
 }
 drawChart();//Thanks to @FABRICATOR                                

/****  END Google charts: Events types *********/                               
}

我得到以下错误：

Uncaught Error: Not an array

---

有什么办法让它工作吗？我遗漏了什么？

最后我找到了最简单的解决方案。 考虑到我使用的是Laravel的ORM（illumb/Database），得到的数据是json格式的

这适用于Laravel和Slim框架

因此，我将变量直接传递给视图（在Slim中）：

然后，在视图中（在本例中为Twig视图，在blade中应该类似），我获取数组并将其放入Javascript代码中的一个变量中：

var myArray = {{ myArray|json_encode|raw }};

然后我迭代获取每个元素并将其添加到Google图表数据数组中：

$.each(myArray,function(index, value){
            //console.log('My array has at position ' + index + ', this value: ' + value.r1);
            data.addRow([value.col1,value.col2,value.col3,value.col4]);
        });

---

现在可以用了。

你试过用

drawChart（）

而不是

google.setOnLoadCallback（drawChart）

？你的意思是这样注释吗

//google.setOnLoadCallback（drawChart）？是的，我试过了，但是运气不好。如何调用
drawChart（）
函数，或者从何处调用它？比如？是的，呵呵，这很有帮助！如果我在代码中手动定义了数据字符串，它就会工作。☺ 但是，当我试图传递数据字符串时仍然会出现错误，因为我得到了一个
未捕获错误：不是数组
，可能是因为
字符串
不是数组