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

未捕获的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条回答 默认 最新

相关推荐 更多相似问题