Вопросы Теги

backbone view + API визуализации Google

Я пытаюсь интегрировать диаграмму визуализации Google в свое приложение backbone.js. В настоящее время у меня есть вызовы google.load(визуализация) и setOnLoadCallback(drawVisualization) в функции рендеринга класса ChartView. Библиотеки визуализации Google загружаются правильно, однако обратный вызов никогда не выполняется.

Ниже приведен пример, показывающий проблему. Если кто-то может помочь, буду очень признателен! 

<!doctype html>
<html>
<head>
    <title>App</title>
    <meta charset="utf-8">
</head>
<body>
<div id="content"></div>

<script src="lib/jquery-1.7.2.min.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="http://www.google.com/jsapi"></script>

<script>

    ChartView = Backbone.View.extend({

        render:function () {
            $(this.el).html('<p>gviz line chart:</p>' +
                    '<div id="gviz" style="width:600px; height:300px;"></div>');
            google.load('visualization', '1', {packages:'linechart'});
            google.setOnLoadCallback(this.drawVisualization);
            return this;
        },

        //This never gets called
        drawVisualization:function () {
            console.log("In draw visualization");
            var data = this.createDataTable('date');
            var chart = new google.visualization.LineChart(this.$('#gviz'));
            chart.draw(data, null, null);
        },

        createDataTable:function (dateType) {
            console.log("Creating datatable");
            var data = new google.visualization.DataTable();
            data.addColumn(dateType, 'Date');
            data.addColumn('number', 'Column A');
            data.addColumn('number', 'Column B');
            data.addRows(4);
            data.setCell(0, 0, new Date("2009/07/01"));
            data.setCell(0, 1, 1);
            data.setCell(0, 2, 7);
            data.setCell(1, 0, new Date("2009/07/08"));
            data.setCell(1, 1, 2);
            data.setCell(1, 2, 4);
            console.log("Created datatable " + data.toJSON());
            return data;
        }

    });

    var AppRouter = Backbone.Router.extend({
        routes:{
            "":"chart"
        },
        chart:function () {
            console.log("Showing chart");
            $("#content").append(new ChartView().render().el);

        }
    });

    router = new AppRouter();
    Backbone.history.start();

</script>

</body>
</html>
6
задан MarkNS 7 June 2012 в 01:29
поделиться