2012-09-10 2 views
2

그래서 패널 안에 차트가 있습니다. 패널에는 두 개의 탭이 있습니다. 첫 번째 탭에는 차트가 포함됩니다. 두 번째 탭에는 차트의 데이터를 필터링하는 데 사용하는 작은 양식이 있습니다.EXTJS - 차트 새로 고침, 다시 그리기 - 차트 업데이트 방법

내 필터링 양식은 '7 일', '30 일 '등의 다른 기간이 포함되어 있으며 한 번 선택하면 사용자 선택 (아약스 사용)을 통해 데이터를 생성하는 곳으로 보냅니다 내 차트.

모두 훌륭합니다.하지만 차트를 업데이트하려면 어떻게해야합니까?! 사용자는 원하는 옵션을 선택할 수 있습니다 (스크립트가 데이터를 가져 와서 쿼리를 변경한다는 것을 알고 있지만 차트는 변경되지 않습니다). 나는 다시 그리기 또는 새로 고침을 사용해야한다고 생각합니다. 다시 그리기를 추가/여기 내 양식 처리기에 새로 고침,보고 뭔가를이

 xtype: 'radiofield', 
     name: 'timespan', 
     id: 'radio3', 
     inputValue: 30, 
     boxLabel: '30 days', 
     handler: function(checkbox, checked) { 
      if (checked) { 
       console.log(checkbox.inputValue); 
       **HERE** 
      } 
     } 

질문처럼 : 어떻게 사용자 작업에 ExtJS로 차트를 업데이트 할 수 있습니다 여기에

내가 생각하고 무엇입니까?

답변

3

나는 그것을 알아 냈다! 여기 내가 한 일이 있습니다 :

여기 내 라디오 버튼 중 하나에 대한 처리기입니다 (위). 버튼이 선택되어 있으면 내 차트의 저장소를 다시로드합니다. 하드 코딩 된 데이터를 전달하는 대신 filteredData라는 함수를 만들었습니다. 이 함수는 ajax를 사용하여 특정 형식의 차트에 대한 데이터를 생성합니다. 함수에서 사용할 확인 된 값 (변수 이름 '값)을 매개 변수로 보냅니다.

handler: function(checkbox, checked) { 
    if (checked) { //refreshes the chart with new data 
     var chart = this.ownerCt.ownerCt.ownerCt.getComponent('dataTab').getComponent('graph'); 
     var chartCmp = chart.getComponent('chartCmp'); //actual chart (used to redraw) 
     var value = checkbox.inputValue; //checked value 


     chart.store.loadData(filteredData(value)); 
     chartCmp.redraw(); 
    }} 

일단 저장소가 새로 고쳐지면 차트를 다시 그립니다.

store.load은 필자가 필요로하지 않는 매우 중요한 부분이었습니다.

만큼 단순)

는 ExtJS 3.4.0에
1

,

Ext.getCmp ('chartCmp') (새로 고침).;