APP SDK 2.0：短期图表？(APP SDK 2.0: Charts in the short

我知道你们会很快使供2.0 SDK一个非常好的绘图工具，但在那之前，我想使用谷歌图表。

在1.x的API，你可以可以通过ID定义HTML对象，然后使用的getElementById（）来获取该项目的引用。因此，例如：

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

但在新的SDK，你没有一个HTML块with--你会怎么做以下工作？这个问题是相关的，你想要锁定的对象到一个地方在HTML的任何项目。

Answer 1:

在新的API的应用程序基类是简单地Ext.container.Container的扩展其本身是AbstractComponent的扩展，并且因此具有getEl（）方法。（请注意，直接将内容添加到DOM节点你失去了通过分机容器提供的自动布局功能）。

下面是一个简单的例子来说明做这样的事情，虽然：

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:

在最后的答案（您的代码段），你只是缺少应用程序，它创建要渲染图表到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 3:

下面的代码。它崩溃与“遗漏的类型错误：无法读取空的特性‘parentNode’”“Ext.define.initComponent”，从“Ext.define.Rally.loadScripts”发起的内部。永远不会获取_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});
    }
});