APP SDK 2.0：短期內的圖表？

我知道你們會很快爲2.0 SDK製作一個非常好的圖表工具，但在那之前，我想使用谷歌圖表。APP SDK 2.0：短期內的圖表？

在1.x API中，可以通過id定義html對象，然後使用getElementById（）獲取對該項目的引用。例如：

var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

但是在新的SDK中，您沒有可用的HTML塊 - 您將如何執行以下操作？這個問題與任何你想把對象固定在html中某個地方的項目有關。

來源

2012-05-08 kimon

在新API中，app base class只是Ext.container.Container的擴展，它本身是AbstractComponent的擴展，因此有getEl()方法。（請注意，通過將內容直接添加到dom節點，您將失去Ext容器提供的自動佈局功能）。

下面是一個簡單的例子來說明做這樣的事情，雖然：

Ext.define('My.App', { 
    extend: 'Rally.app.App', 
    items: [ 
     { 
      xtype: 'container', 
      itemId: 'chartContainer' 
     } 
    ], 
    launch: function() { 
     var chartContainer = this.down('#chartContainer').getEl().dom; 
     var chart = new google.visualization.BarChart(chartContainer); 
    } 
});

來源

2012-05-08 04:01:38

非常酷 - 我在哪裏可以找到關於此的一般文檔？我認爲這是EXTJS的東西？ – kimon

我需要調用google.load（），然後在可以在「啓動」函數中創建新條形圖之前調用google.setOnLoadCallback（this._drawChart）。但是在調用_drawChart之前它拋出了一個模糊的異常。我在這裏錯過了什麼？ – kimon

是的，這是分機。所有的Ext源代碼文檔都可以在SDK文檔中找到：https：//rally1.rallydev.com/apps/2.0p/doc/#!/api 如果您提供源代碼片段，也許有人可以幫助您調試它... –

下面的代碼。它從「Ext.define.Rally.loadScripts」發起的「Uncaught TypeError：無法讀取屬性'parentNode'null」內部的「Ext.define.initComponent」中崩潰。永遠不會獲取_drawChart（）：

我還添加了以下行耙腳本引用谷歌API：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

而這裏的App.js：

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 

    launch: function() { 
     //Write app code here 
     google.load("visualization", "1.0", {packages:["corechart"]}); 
     google.setOnLoadCallback(this._drawChart); 
    }, 

    _drawChart: function() { 
     var chartContainer = this.down('#chartContainer').getEl().dom; 
     var chart = new google.visualization.BarChart(chartContainer); 

     var graphArray = [['Module', 'Payload Code', 'Test Code']]; 

     chartData = google.visualization.arrayToDataTable(graphArray); 

     chart.draw(chartData, {width: 700, height: 500}); 
    } 
});

來源

2012-05-08 14:32:50 kimon

馬特似乎已經在他的回答中解決了這個問題。 –

在最後一個答案（你的代碼片段），你只是缺少應用程序的項目子項，它創建了你想要渲染圖表的chartContainer元素。我認爲這個代碼應該適合你：

Ext.define('CustomApp', { 
    extend: 'Rally.app.App', 
    componentCls: 'app', 
    items: [ 
     { 
      xtype: 'container', 
      itemId: 'chartContainer' 
     } 
    ], 

    launch: function() { 
     //Write app code here 
     google.load("visualization", "1.0", {packages:["corechart"]}); 
     google.setOnLoadCallback(this._drawChart); 
    }, 

    _drawChart: function() { 
     var chartContainer = this.down('#chartContainer').getEl().dom; 
     var chart = new google.visualization.BarChart(chartContainer); 

     var graphArray = [['Module', 'Payload Code', 'Test Code']]; 

     chartData = google.visualization.arrayToDataTable(graphArray); 

     chart.draw(chartData, {width: 700, height: 500}); 
    } 
});

來源

2012-05-08 15:33:52 mattparrish

不幸的是，這仍然失敗，同樣的錯誤 – kimon

SDK 2.0圖表組件的第一份草案現在已經生效。

你可以找到關於它here。

來源

2012-07-09 18:39:17

APP SDK 2.0：短期內的圖表？

回答

相關問題