APP SDK 2.0：短期間でチャート？

Question

すぐに2.0 SDK用に本当に素晴らしいチャート作成ツールを作ってくれると知っていますが、それまではGoogle Chartsを使いたいと思います。

1.x APIでは、idでhtmlオブジェクトを定義した後、getElementById（）を使用してそのアイテムへの参照を取得できます。だから、例えば：

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

しかし、新しいSDKで、あなたは次のことを行うだろうかwith--動作するHTMLブロックを持っていないのですか？この質問は、あなたのhtml内の場所にオブジェクトを固定する必要のあるアイテムに関係します。

Answer 1

新しい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); 
    } 
}); 

Answer 2

はここのコードです。 "Uncaught TypeError：" Ext.define.Rally.loadScripts "から開始された" Ext.define.initComponent "の内部でnullの" parentNode 'プロパティを読み取れません。 ）（_drawChartになることはありません：

私はまた、GoogleのAPIを参照するようにすくいスクリプトに次の行を追加しました：で

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

Answer 3

：

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

そして、ここではApp.jsです最後のアンサー（あなたのコードスニペット）は、チャートをレンダリングする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}); 
    } 
}); 

Answer 4

SDK 2.0チャーティングコンポーネントの最初の草案が現在公開されています。

詳細はhereです。