omurga görünümü + google görselleştirme api

Bir google görselleştirme grafiğini benim backbone.js uygulamasına entegre etmeye çalışıyorum. Şu anda bir ChartView sınıfının render işlevinde hem google.load (visualization) hem de setOnLoadCallback (drawVisualization) çağrıları var. Google görselleştirme kitaplıkları doğru şekilde yükleniyor gibi görünüyor, ancak geri çağrı asla yürütülmez.omurga görünümü + google görselleştirme api

Eğer birisi size yardımcı olabilirse, bu sorunu gösteren bir örnektir. Çok minnettar olurum!

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

kaynak

2012-06-07 MarkNS

Tamam, bunu başka bir ay geçmeden önce posterity için kaydedin. Google.set komutunu kullanmak yerine google.load çağrısının kendisini argüman olarak argüman olarak ayarlamak mümkündür. OnLoadCallback yöntemi. Ayrıca jquery nesnesinin ilk çocuğunu almak için kodu düzeltmek zorunda kaldı ve iyi çalışıyor.

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); 
    } 

});

kaynak

2012-07-09 21:47:43 MarkNS

sayesinde kullanabilirsiniz - Bu gün kaydedildi! – necromancer

Şu anda GoogleCharts ile backbone.js'yi kullanıyorum. Google görselleştirmelerini View's render() yönteminize yüklemek yerine, komut dosyasındaki backbone.js görünümlerinin dışına yükleyebilirsiniz.

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

Bu yine de farklı bir hata verebilir. Ben işlemek arıyorum hangi görünümü en 'el' hala Google Charts hatayı bir "çizelgeleri desteklemiyor tarayıcı" vermeye DOM nedenleri parçası değil eskimiş ("chart.draw" olduğunu fark ettik.

.. Görünüm 'el' görünümünde bir olay üzerinde Eg için DOM eklenir (ya da model) olmuştur emin olduktan sonra ben ki 'drawVisualization' fonksiyonunu tetikleyecektir:

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

Umut bu yardımcı olur

kaynak

2012-06-15 20:52:57

Bağımlılık yönetimi için require.js kullanıyorsanız, belirli modülleri yüklemek için tekli çağrıyı kullanmanın güzel bir şekilde çalıştığını fark ettim.

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); 
     } 

    }

kaynak

2012-08-20 17:07:48

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

kaynak

2013-06-13 14:09:37 user876491

omurga görünümü + google görselleştirme api

cevap

İlgili konular