未捕获的TypeError：无法读取未定义的属性“ChartWrapper”

Question

I'm trying to integrate Google Charts with Wordpress, using Advanced Custom Fields input to populate the data. After just one iteration in the Javascript, it crashes, despite proper data formatting.

From other questions I gathered google.visualization must not be loading in time since it's undefined, but the authors of those questions didn't use setOnLoadCallback. I have, which should address that. What am I misunderstanding?

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

first, you need to load the 'controls' package,
when using ChartWrapper or ControlWrapper

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

---

next, setOnLoadCallback takes a reference to a function,
not the result of a function()

it should be --> google.charts.setOnLoadCallback(drawPieChart);

if you need to pass arguments to the callback,
add an anonymous function, or something similar in between...

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

---

also, the callback only needs to be used once,
after it fires the first time, you can drawn as many charts as needed

recommend restructure as follows...

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