2014-01-21 3 views
1

나는 현재 작성중인 선 차트에 문제가 있습니다.ExtJS 4.2 - 차트 다시 그리기, 이전 레이블이 계속 표시됨

나는 매초마다 을 자동으로 업데이트하고 "Ping Time"텍스트 필드 의 값을 받아 다음 "분"색인에 배치합니다.

그러나 잘못된 점은 차트가 업데이트되면 축을 제대로 새로 고칠 수 없다는 것입니다. 현재 작업에서 볼 수 있습니다

http://jsfiddle.net/HTj5Q/71/

코드의 우려 조각이 차트 생성 될 것이다,

Ext.create('Ext.chart.Chart',{ 
     renderTo:Ext.getBody(), 
     id:'ChartTest', 
     xtype: 'chart', 
     width: 400, 
     height:300, 
     store: testStore, 
     axes:[ 
      { 
       title:'Ping Time', 
       type: 'Numeric', 
       position: 'left', 
       grid:true, 
       fields: ['ping'], 
      }, 
      { 
       title:'Minutes', 
       type: 'Numeric', 
       position: 'bottom', 
       grid:true, 
       fields:['id'], 
       minimum:0, 
      } 
     ], 
     series: [ 
      { 
       type:'line', 
       xField:'id', 
       yField:'ping', 
       tips: { 
       trackMouse: true, 
       width: 80, 
       height: 40, 
       renderer: function(storeItem, item) { 
        this.setTitle(storeItem.get('id')); 
        this.update(storeItem.get('ping')); 
       } 
      } 
      } 
     ], 
}); 

을뿐만 아니라 상쾌한 코드로

var task = Ext.TaskManager.start({ 
run: function() { 
    min=min+1; 
    // max=max+1; 
    // Ext.getCmp('ChartTest').axes.items[1].maximum=max; 
    Ext.getCmp('ChartTest').axes.items[1].minimum=min; 
    test= Ext.getCmp('PingTime').getValue(); 
    temp = temp+1; 
    Ext.getCmp('display').setValue('Temp = '+temp+' Test = '+test); 

    testStore.add({id:temp,ping:test}); 
    var rec= testStore.getAt(0); 
    Ext.getCmp('display2').setValue('rec is '+rec.get('id')); 
    if(rec.get('id')<temp-8) 
    { 
     testStore.remove(rec); 
    } 
    Ext.getCmp('ChartTest').redraw(); 

    }, 
    interval: 2000 
}); 

답변

0

에 시도 사용

Ext.getCmp('ChartTest').surface.removeAll(); 

이전의 redraw() 메소드

일부 문제가 아직 남아 있기 때문에 완벽한 해결책이 아닙니다. 예를 들어 "Ping time"텍스트 필드의 값을 크게 변경하면 Y 축이 손상됩니다. 또한 모든 브라우저에서 제대로 작동하지 않을 수도 있지만이 추가 정보가 최종 해결책을 찾는 데 도움이 될 것으로 생각됩니다.

+0

나는 당신이 말한대로하려고했지만, 당신이 말했듯이, y 축은 즉시 대부분의 라벨을 잃을 것입니다. 최대 값과 최소값을 100으로 설정하여이를 고치려고하면 차트가 완전히 손상됩니다. 업데이트 된 코드는 여기에서 볼 수 있습니다 : – user3216871

+0

http://jsfiddle.net/HTj5Q/74/ – user3216871