Question

我正在尝试创建一个功能，可以处理发送到页面的所有数据，以在页面上的不同点构建谷歌图表。第一个认为我正在做的是正确设置图表将使用的数据数组。那没问题。我遇到的问题是当prdocess到达“google.visualization.arrayToDataTable（[data]）”时，我收到的错误是“google.visualization is undefined”。任何有关我可能做错的帮助将不胜感激。

//$(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();
// });

如果某人有一个他们创建的功能来处理谷歌图表的这种操作，请分享。

Answer 1

您的回调无效：

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

实际上正在调用您的draw_chart方法，因此在触发onLoad之前调用它。你需要做这样的事情：

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

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

1 个答案: