Uncaught TypeError: Eigenschaft 'ChartWrapper' von undefined kann nicht gelesen werden

Question

Ich versuche Google Charts mit Wordpress zu integrieren, indem ich erweiterte benutzerdefinierte Felder verwende, um die Daten zu füllen. Nach nur einer Iteration im Javascript, it crashes, despite proper data formatting.

Von anderen Fragen, die ich gesammelt google.visualization muss nicht rechtzeitig geladen werden, da es nicht definiert ist, aber die Autoren dieser Fragen nicht setOnLoadCallback verwendet. Ich habe, das sollte das ansprechen. Was verstehe ich falsch?

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

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

erste, müssen Sie die 'controls' Paket laden,
bei der Verwendung von ChartWrapper oder ControlWrapper

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

---

nächstes nimmt setOnLoadCallback einen Verweis auf eine function,
nicht das Ergebnis einer function()

sollte es sein ->google.charts.setOnLoadCallback(drawPieChart);

, wenn Sie Argumente zu übergeben müssen der Rückruf,
fügen Sie eine anonyme Funktion oder etwas ähnliches dazwischen ...

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

---

auch, muss der Rückruf nur einmal verwendet werden,
, nachdem es das erste Mal feuert, können Sie so viele Diagramme gezeichnet als

benötigt restrukturieren empfehlen wie folgt ...

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