javascript - 未捕获的类型错误 : Cannot read property 'ChartWrapper' of undefined

Question

我正在尝试将 Google Charts 与 Wordpress 集成，使用高级自定义字段输入来填充数据。经过 Javascript 的一次迭代后，it crashes, despite proper data formatting .

从我收集的其他问题中，google.visualization 必须无法及时加载，因为它是未定义的，但这些问题的作者没有使用 setOnLoadCallback。我有，应该解决这个问题。我有什么误解吗？

函数.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');

图表生成器.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() 的结果

应该是 --> 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);  
  }  
});