2

我知道你们很快就会为 2.0 SDK 制作一个非常好的图表工具，但在那之前，我想使用 Google Charts。

在 1.x API 中，您可以通过 id 定义 html 对象，然后使用 getElementById() 获取对该项目的引用。例如：

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

但是在新的 SDK 中，您没有可使用的 HTML 块——您将如何执行以下操作？此问题与您要将对象固定到 html 中某个位置的任何项目相关。

4

4 回答 4

1

在新的 API 中，应用程序基类只是 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-08T04:01:38.143 回答
1

在最后一个答案（您的代码片段）中，您只是缺少应用程序的子项，它创建了您想要将图表呈现到其中的 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-08T15:33:52.313 回答
0

这是代码。它在从“Ext.define.Rally.loadScripts”启动的“Ext.define.initComponent”内因“Uncaught TypeError: Cannot read property 'parentNode' of null”而崩溃。永远不会到达 _drawChart()：

我还在 rake 脚本中添加了以下行以引用 google 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-08T14:32:50.093 回答
0

SDK 2.0 图表组件的初稿现已上线。

你可以在这里找到它。

于 2012-07-09T18:39:17.577 回答