谷歌折線圖加載點擊使用Jquery

Question

我有一個可怕的時間試圖加載點擊圖表。基本上我添加一個新的行與另一個表中的表（該部分工作正常）點擊，我想在那裏彈出一個圖表。我一直收到「無法讀取未定義的屬性」DataTable「。」不知道爲什麼我這麼掛了。我已經廣泛地研究了我可以找到的每一個例子，而且無論我嘗試什麼，似乎都沒有任何工作。

這裏有相應的JavaScript

google.charts.load("visualization", "1", {packages:["corechart"], "callback": drawChart}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart(date,cafe,thebox) { 
    var jsonData = $.ajax({ 
     type:"POST", 
     url: "posts.php", 
     data : { hourly_date : date, hourly_cafe : cafe }, 
     dataType: "json", 
     async: false 
     }).responseText;   
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.LineChart(thebox); 
    chart.draw(data, {width: '100%', height: 240}); 
} 

$(".mdl-layout__content").on("click","#fixed-tab-1 .mdl-data-table tbody tr td:first-child",function(){ 
    var therow=$(this).closest("tr"); 
    if(therow.hasClass("open")){ 
     therow.removeClass("open"); 
     therow.next("tr").remove(); 
    } 
    else{ 
     var cafe=$(this).text(); 
    var thedate=$("#theday").val(); 
     therow.addClass("open"); 

     $.post("posts.php",{dsales_date:thedate,cafe:cafe},function(data){ 
     therow.after("<tr class='detail_row'><td colspan='4' class='sdetails'><div class='chart'></div>"+data+"</td></tr>"); 
    drawChart(thedate,cafe,therow.next("tr").find(".chart")); 
    }); 
    } 
}); 

這裏是被退回來構建圖表的數據

{"cols":[{"label":"Hour","type":"number"},{"label":"Sales","type":"number"}],"rows":[{"c":[{"v":6,"f":null},{"v":"26.10","f":null}]},{"c":[{"v":7,"f":null},{"v":"152.50","f":null}]},{"c":[{"v":8,"f":null},{"v":"311.95","f":null}]},{"c":[{"v":9,"f":null},{"v":"182.30","f":null}]},{"c":[{"v":10,"f":null},{"v":"181.45","f":null}]},{"c":[{"v":11,"f":null},{"v":"193.25","f":null}]},{"c":[{"v":12,"f":null},{"v":"157.70","f":null}]},{"c":[{"v":13,"f":null},{"v":"223.35","f":null}]},{"c":[{"v":14,"f":null},{"v":"250.85","f":null}]},{"c":[{"v":15,"f":null},{"v":"213.05","f":null}]},{"c":[{"v":16,"f":null},{"v":"93.00","f":null}]},{"c":[{"v":17,"f":null},{"v":"105.90","f":null}]},{"c":[{"v":18,"f":null},{"v":"41.80","f":null}]},{"c":[{"v":19,"f":null},{"v":"51.40","f":null}]},{"c":[{"v":20,"f":null},{"v":"33.80","f":null}]}]} 

Answer 1

時setOnLoadCallback電話drawChart，

date,cafe,thebox都將undefined

請嘗試像這樣，而不是...

google.charts.load('current', { 
    packages:['corechart'], 
    'callback': function() { 
    $(".mdl-layout__content").on("click","#fixed-tab-1 .mdl-data-table tbody tr td:first-child",function(){ 
     var therow=$(this).closest("tr"); 
     if(therow.hasClass("open")){ 
      therow.removeClass("open"); 
      therow.next("tr").remove(); 
     } 
     else{ 
      var cafe=$(this).text(); 
     var thedate=$("#theday").val(); 
      therow.addClass("open"); 

      $.post("posts.php",{dsales_date:thedate,cafe:cafe},function(data){ 
      therow.after("<tr class='detail_row'><td colspan='4' class='sdetails'><div class='chart'></div>"+data+"</td></tr>"); 
     drawChart(thedate,cafe,therow.next("tr").find(".chart")); 
     }); 
     } 
    }); 
    } 
}); 

function drawChart(date,cafe,thebox) { 
    var jsonData = $.ajax({ 
     type:"POST", 
     url: "posts.php", 
     data : { hourly_date : date, hourly_cafe : cafe }, 
     dataType: "json", 
     async: false 
     }).responseText; 
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.LineChart(thebox); 
    chart.draw(data, {width: '100%', height: 240}); 
}