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

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()

的结果

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

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

1 个答案: