Ext-JSで単純な折れ線グラフを作成できません

Question

シンプルなグラフを作成しようとすると、次のエラーが発生します。私は私のアプリ内で同様の問題を抱えています。私は小さな削減​​を作成し、私の人生のために私が間違っていることを把握することはできませんので、問題を絞るしようとしている。誰かが私が持っているものを見て、あなたが何か問題を見つけることができるかどうかを見てみることができますか？

私は以下のコードを実行すると、私は次のエラー

予期しない値行列（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のコンソールにコピーしてコピーできます。グラフ化されず、エラーが発生しないことがわかります。

Answer 1

ExtJSの時間軸は実際にはバグが多く、常にデータを集約しようとしています。これにはいくつかのバグがあります（ストアの日付フィールドの名前は '私はこの問題を見るためのチケットを作成し、彼らはそれに取り組む必要があると判断しました。

最後に、数値軸を使用してタイムスタンプを渡し、日付として表示するためにラベルレンダラーを使用しました。

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