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

最後の回答（コードスニペット）では、アプリの子アイテムが欠落していました。これにより、グラフをレンダリングする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 に答える
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 に答える
0

SDK2.0チャートコンポーネントの最初のドラフトが公開されました。

あなたはここでそれについて知ることができます。

于 2012-07-09T18:39:17.577 に答える
0

これがコードです。「Ext.define.Rally.loadScripts」から開始された「Ext.define.initComponent」内で「Uncaught TypeError: Cannot read property 'parentNode' of null」でクラッシュします。_drawChart() に到達しない:

また、Google API を参照するために次の行を rake スクリプトに追加しました。

<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 に答える