logo标签列表

Backbone视图 + Google可视化API

javascriptbackbone.jsgoogle-visualization
6
我正在尝试将Google可视化图表集成到我的backbone.js应用程序中。目前，我在ChartView类的渲染函数中同时调用了google.load（visualization）和setOnLoadCallback（drawVisualization）。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>
4个回答
12

好的，为了记录这个问题，以防再过一个月就过时了。可以将回调函数作为google.load调用的参数设置，而不是使用google.setOnLoadCallback方法。还需要调整代码以获取jquery对象的第一个子元素，这样它就能正常工作了。

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',  {'callback':this.drawVisualization,
            'packages':['linechart']});
        return this;
    },

    drawVisualization:function () {
        console.log("In draw visualization");
        var data = new google.visualization.DataTable();
        data.addColumn('date', '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);
        var chart = new google.visualization.LineChart(this.$('#gviz').get(0));
        chart.draw(data, null, null);
    }

});
3

如果你正在使用require.js进行依赖管理，我发现使用单一调用来加载特定模块非常方便。

    define(
        [
        'backbone'
        , 'socialPages/data/statCollection'
        , 'date'
        , 'https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'
        ], function(
        Backbone
        , StatsCollection
        ) {

return Backbone.View.extend({
    initialize: function() {
        _.bindAll( this
            , '_chartDataChanged'
            , '_drawChart'
            , '_fetchStats'
            , '_generateFields'
            , '_generateRows'
            , '_generateStatsTotals'
            , '_lineChartOptions'
            , '_onItemSelected'
            , '_padWithZeroValues'
            , '_setChartDimensions'
            , 'clean'
            , 'render'
        );

        this._firstRender       = true;
        this._sampleRate        = 'month';
        this.statsCollection    = new StatsCollection();
        this.dimensions         = this._setChartDimensions();
        this.statsCollection.bind( 'all' , this._chartDataChanged );
        this._fetchStats();
        if( window.google ) {
            google.setOnLoadCallback( this._drawChart );
        }

    }
2
你可以使用https://github.com/kontera-technologies/Backbone.GoogleChart。
chart = new Backbone.GoogleChart({
  chartType: 'ColumnChart',
  dataTable: [['Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
            [700, 300, 400, 500, 600, 800]],
  options: {'title': 'Countries'},
});

$("body").append(chart.render().el)
0

我目前正在使用backbone.js和GoogleCharts。与其在您的View的render()方法中加载Google可视化，不如在脚本中将其加载到backbone.js视图之外。

<script>
  google.load('visualization', '1', {packages:'linechart'});
  ChartView = Backbone.View.extend({

        render:function () {
            this.drawVisualization();
            return this;
        },
        drawVisualization:function () {
         ....
         chart.draw(data, null, null);
        }
</script>

这仍然可能会产生不同的错误。我注意到从render中调用"chart.draw"（此时视图的'el'还没有成为DOM的一部分）会导致Google Charts出现“您的浏览器不支持图表”错误。

我建议在确定View 'el'已经插入DOM后再触发'drawVisualization'函数，例如，在View（或其模型）中的事件上。比如：

<script>
  google.load('visualization', '1', {packages:'linechart'});
  ChartView = Backbone.View.extend({
        events:{
            this.model.on('change',this.drawVisualization, this);
        },
        render:function () {
            this.drawVisualization();
            return this;
        },
        drawVisualization:function () {
         ....
         chart.draw(data, null, null);
        }
</script>

希望这能有所帮助。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接