douzhuo1858
2017-07-24 19:47
浏览 81
已采纳

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

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>
  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • douxian7534 2017-07-24 19:59
    已采纳

    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);  
      }  
    });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题