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