主干视图 + 谷歌可视化 api答案

【问题标题】：backbone view + google visualisation api主干视图 + 谷歌可视化 api
【发布时间】：2012-06-07 01:29:11
【问题描述】：

我正在尝试将谷歌可视化图表集成到我的主干.js 应用程序中。目前，我在 ChartView 类的渲染函数中有 google.load(visualization) 和 setOnLoadCallback(drawVisualization) 调用。谷歌可视化库似乎加载正确，但回调从未执行。

以下是显示问题的示例，如果有人可以提供帮助，我将非常感激！

<!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>

【问题讨论】：

标签： javascript backbone.js google-visualization

【解决方案1】：

好的，在另一个月过去之前记录下来以供后代使用。可以将回调设置为 google.load 调用本身的 arg，而不是使用 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);
    }

});

【讨论】：

【解决方案2】：

如果您使用 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 );
        }

    }

【讨论】：

【解决方案3】：

你可以使用 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)

【讨论】：

【解决方案4】：

我目前也在使用带有 GoogleCharts 的主干.js。除了在 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>

这可能仍然会产生不同的错误。我注意到从渲染调用“chart.draw”（此时视图的“el”仍然不是 DOM 的一部分，导致 Google Charts 发出“您的浏览器不支持图表”错误。

在您确定视图“el”已插入 DOM 后，我将触发“drawVisualization”功能，例如。在视图（或其模型）中的事件上。说：

<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>

希望这会有所帮助。

【讨论】：