6

Googleの視覚化チャートをbackbone.jsアプリに統合しようとしています。現在、ChartViewクラスのrender関数に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

4 に答える 4

12

さて、次の月が過ぎる前に後世のためにこれを記録します。google.setOnLoadCallbackメソッドを使用するのではなく、コールバックをgoogle.load呼び出し自体への引数として設定することができます。また、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);
    }

});
于 2012-07-09T21:47:43.837 に答える
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 );
        }

    }
于 2012-08-20T17:07:48.917 に答える
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)
于 2013-06-13T14:09:37.557 に答える
0

現在、GoogleChartsでもbackbone.jsを使用しています。ビューのrender（）メソッドでGoogleビジュアライゼーションをロードするのではなく、スクリプトでバックボーン.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の一部ではないため、GoogleChartsは「ブラウザはチャートをサポートしていません」というエラーを出します。

たとえば、ビュー'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>

お役に立てれば。

于 2012-06-15T20:52:57.787 に答える