Google可视化循环-返回google.visualization未定义

Question

I am trying to create one function that can handle all the data that is sent to the page to build google charts in different points on the page. The first think that I am doing is properly setting up the data array that the chart will use. That is ok. The issue that I am having is when the prdocess gets to the "google.visualization.arrayToDataTable([data])" the error I receive is "google.visualization is undefined". Any help with what I may be doing wrong will be appreciated.

//$(document).ready(function () {
var chart_pie = $('.chart-pie');
var dataObj = [];
var Chart = {} || [];
//console.log(chart_pie);

google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        // google.setOnLoadCallback(Chart.draw_chart);

        var chartColors = ['#f0ca41','#c97038', '#14425c',  '#3d799d', '#625e79'];
        var pieHeight = 300;
        var pieWidth = 400;
        var columnHeight = 230;
        var columnWidth = 775;

Chart = {

    init: function () {
        this.pie_chart();
    },

    pie_chart: function () {
        chart_pie.each(function () {
            var chartID = $(this).attr('id');
            chartID = chartID.replace('chart-', '');
            console.log(chartID +': '+ JSON.stringify(chart_data[chartID]));
            Chart.populate_object(chart_data[chartID], chartID);
            google.setOnLoadCallback(Chart.draw_chart(dataObj[chartID]));
            // console.log(JSON.stringify(chart_data[chartID]));
        });
    }, 

    populate_object: function (obj, chartID) {


        for (var i=0;i<obj.length;i++) {
            dataObj[obj.chartID] = [obj[i].Label, obj[i].Value];
        }
    },

    draw_chart: function (data) {
        var chartData = google.visualization.arrayToDataTable([data]);

        var options = {'title':chart_data[chartID].title,
                 'width':pieWidth,
                 'height':pieWidth,
                 borderColor: '#ffffff',
                 'colors': chartColors};

        var chart = new google.visualization.PieChart(document.getElementById('chart-' + chartID));

        chart.draw(chartData, options);
    }
};

Chart.init();
// });

If some one has a function that they created to handle this type of operation for google charts please share.

Answer 1

Your callback is not valid:

google.setOnLoadCallback(Chart.draw_chart(dataObj[chartID]));

Is actually invoking your draw_chart method, so its being called before onLoad has been triggered. You would need to do something like this:

google.setOnLoadCallback(function () {
  Chart.draw_chart(dataObj[chartID]);
});