Uncaught TypeError：無法讀取屬性'ChartWrapper'undefined

Question

我正在嘗試將Google Charts與Wordpress集成，使用高級自定義字段輸入來填充數據。在JavaScript中只有一個迭代之後，it crashes, despite proper data formatting。

從其他問題我收集google.visualization一定不能加載及時，因爲它是未定義的，但這些問題的作者沒有使用setOnLoadCallback。我有，應該解決這個問題。我誤解了什麼？

的functions.php：

function create_chart(){ 
    if(have_rows('chart')){ 
     wp_enqueue_script('google-charts', 'https://www.gstatic.com/charts/loader.js'); 

     $chart_data = array(); 
     while(have_rows('chart')) 
      array_push($chart_data, the_row(true)); 

     wp_register_script('chart-generator', get_stylesheet_directory_uri() . '/js/chart-generator.js'); 
     wp_enqueue_script('chart-generator', true); 
     wp_localize_script('chart-generator', 'chart_data', $chart_data); 
    } 
} 
add_action('wp_head', 'create_chart'); 

圖表-generator.js

(function($){ 
    google.charts.load('current', {packages: ['corechart']}); 
    for(i=0; i<chart_data.length; i++){ 

     // Reencodes objects as arrays 
     next_chart = chart_data[i]; 
     for(j=0; j<next_chart.entry.length; j++) 
      next_chart.entry[j] = Object.values(next_chart.entry[j]); 
     console.log(next_chart); 

     google.charts.setOnLoadCallback( 
      drawPieChart( 
       next_chart.title, 
       next_chart.id, 
       next_chart.colors, 
       next_chart.entry)); 
    } 
})(jQuery); 

function drawPieChart(title, id, colors, entries) { 
    // Appends to beginning of array 
    entries.unshift(['title', 'quantity']); 

    var wrapper = new google.visualization.ChartWrapper({    
     chartType: 'PieChart', 
     dataTable: google.visualization.arrayToDataTable(entries), 
     options: { 
      'title': title, 
      pieHole: 0.4, 
     }, 
     containerId: id 
    }); 
    wrapper.draw(); 
} 

HTML：

<div id="onechart" style="width:200px; height: 200px;"></div> 
<div id="twochart" style="width:200px; height: 200px;"></div> 
<div id="redchart" style="width:200px; height: 200px;"></div> 
<div id="vis_div" style="width:200px; height: 200px;"></div> 
<div id="burger" style="width:200px; height: 200px;"></div> 

Answer 1

第一，你需要加載'controls'包，
使用時ChartWrapper或ControlWrapper

google.charts.load('current', {packages: ['corechart', 'controls']}); 

---

接下來，setOnLoadCallback需要參照function，
不是一個function()

的結果應該是 - >google.charts.setOnLoadCallback(drawPieChart);

，如果你需要傳遞參數給回調，
添加一個匿名函數，或類似之間...

google.charts.setOnLoadCallback(function() { 
    drawPieChart( 
    next_chart.title, 
    next_chart.id, 
    next_chart.colors, 
    next_chart.entry 
); 
}); 

---

還，回調只需要使用一次，
它觸發後的第一時間，你可以儘可能多的圖表需要

建議重組如下繪製...

google.charts.load('current', {packages: ['corechart', 'controls']}); 
google.charts.setOnLoadCallback(function() { 
    for(i=0; i<chart_data.length; i++){ 
     // Reencodes objects as arrays 
     next_chart = chart_data[i]; 
     for(j=0; j<next_chart.entry.length; j++) 
      next_chart.entry[j] = Object.values(next_chart.entry[j]); 
     console.log(next_chart); 

      drawPieChart( 
       next_chart.title, 
       next_chart.id, 
       next_chart.colors, 
       next_chart.entry); 
    } 
});