4

単純なグラフを作成しようとすると、次のエラーが発生します。アプリ内で同様の問題が発生しており、問題を絞り込もうとしていたため、小さな削減​​を作成しましたが、何が間違っているのか一生わかりません。誰かが私が持っているものを見て、何か問題を見つけられるかどうか見てもらえますか?

以下のコードを実行すると、次のエラーが発生します

予期しない値の行列 (NaN,NaN,NaN,NaN,NaN,-Infinity) 解析変換属性。(function(){var e=this,a=Object.protot...ate("Ext.XTemplate",j,g)}return j}}); ext-all.js (15 行目)

私が実行しているコードは次のとおりです。

Ext.require('Ext.chart.*'); 
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']); 
Ext.onReady(function () { 
    var store = new Ext.data.ArrayStore({ 
        fields: [ 
            //timestamp means UNIX timestamp 
            {name: 'datetime', type: 'date', dateFormat: 'timestamp'}, 
            {name: 'data', type: 'float'} 
        ], 
        data: [ 
            [1311844196,47], 
            [1311846214,68], 
            [1311848214,90] 
        ] 
    }); 

    Ext.create('Ext.Window', { 
        width: 800, 
        height: 600, 
        title: 'Test Chart', 
        renderTo: Ext.getBody(), 
        layout: 'fit', 
        items: { 
            xtype: 'chart', 
            store: store, 
            axes: [{ 
                type: 'Numeric', 
                position: 'left', 
                fields: ['data'] 
            },{ 
                type: 'Time', 
                position: 'bottom', 
                fields: ['datetime'], 
                dateFormat: 'Md,H:i' 
            }], 
            series: [{ 
                type: 'line', 
                axis: 'left', 
                xField: 'datetime', 
                yField: 'data', 
                tips: { 
                    width: "6em", 
                    renderer: function(storeItem, item) { 
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(storeItem.get('datetime'), 'H:i')); 
                    } 
                } 
            }] 
        } 
    }).show(); 
});

問題を再現する簡単な方法は、http://dev.sencha.com/deploy/ext-4.0.2a/examples/charts/Line.htmlにアクセスすることです (私は Firefox を使用していますが、Chrome も動作しません)。 . ページが読み込まれたら、サンプル ウィンドウを閉じて、上記のコードをコピーして firebug のコンソールに貼り付けることができます。何もチャート化されず、エラーが発生することがわかります。

4

1 に答える 1

6

ExtJS の時間軸は本当にバグが多く、常にデータを集計しようとし (これは望ましくありません)、他にもいくつかのバグがあります (ストアの日付フィールドの名前は「date」でなければならないなど)。この問題を確認するためにチケットを作成しましたが、彼らはそれに取り組む必要があると判断しました。

私がやったことは、数値軸を使用し、タイムスタンプを渡し、ラベルレンダラーを使用してそれらを日付として表示することでした。

Ext.require('Ext.chart.*');
Ext.require(['Ext.Window', 'Ext.layout.container.Fit']);
Ext.onReady(function () {
    var store = new Ext.data.ArrayStore({
        fields: ['tstamp', 'data'],
        data: [
            [1311800196, 95], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311844196, 47], // Jul 28 2011 02:09:56 GMT-0700 (Pacific Daylight Time)
            [1311846214, 68], // Jul 28 2011 02:43:34 GMT-0700 (Pacific Daylight Time)
            [1311848214, 90]  // Jul 28 2011 03:16:54 GMT-0700 (Pacific Daylight Time)
        ]
    });

    Ext.create('Ext.Window', {
        width: 800,
        height: 600,
        title: 'Test Chart - Dates along the x axis',
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: {
            xtype: 'chart',
            store: store,
            axes: [{
                type: 'Numeric',
                position: 'left',
                fields: ['data']
            },{
                type: 'Numeric',
                position: 'bottom',
                fields: ['tstamp'],
                minimum: 1311800196, // Same as the first point
                maximum: 1311848214, //Same as the last point
                roundToDecimal: false, // required so it won't mess with my renderer
                label: {
                    renderer: function(value) {
                        var date = new Date(value * 1000);
                        return Ext.Date.format(date, "H:i") + "\n" + Ext.Date.format(date, "M j") ;
                    }
                }
            }],
            series: [{
                type: 'line',
                axis: 'left',
                xField: 'tstamp',
                yField: 'data',
                tips: {
                    width: "6em",
                    renderer: function(storeItem, item) {
                        this.setTitle(storeItem.get('data') + '@' + Ext.Date.format(new Date(storeItem.get('tstamp')*1000), 'H:i'));
                    }
                }
            }]
        }
    }).show();
})
于 2011-08-05T18:16:33.493 に答える