Ext-JS에서 간단한 꺾은 선형 차트를 만들 수 없습니다.

Question

간단한 차트를 만들려고 할 때 다음 오류가 발생합니다. 내 애플 리케이션 내에서 비슷한 문제가 생기고 나는 작은 감소를 만들었고 나는 내 인생이 내가 잘못하고있는 것을 알아낼 수 없다. 그래서 문제를 좁히려 고 노력했다. 누군가 내가 가지고있는 것을보고 어떤 문제를 발견 할 수 있는지 알아볼 수 있습니까? 나는 아래의 코드를 실행하면

, 나는 속성을 변환 다음과 같은 오류를

예기치 않은 값 매트릭스 (NaN의 NaN의 NaN의 NaN의 NaN의 -Infinity) 구문 분석을 얻을. (function() {var e = this, a = Object.protot ... ate ("Ext.XTemplate", j, g)} return j}}); 내선 - 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로 이동하는 것입니다 (나는 파이어 폭스를 사용하고 있지만, 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(); 
})