차트가로드 될 때 함수를 호출하려는 경우

Question

차트가로드 될 때 함수를 호출하고, 리스너에서이 함수를 작성하지만 차트가 표시되기 전에 해당 함수가 작성되도록하려면 chartRendered 또는 any를 경청해야하는 아이디어 아래의 다른

  getChartConfig: function(project_oid) { 
       that = this; 
       var chart = Ext.getCmp('mychart'); 
       if (chart) { 
        chart.destroy(); 
       } 
       return { 
        xtype:'rallychart', 
        id: 'mychart', 
        storeConfig: { 
         find: { 
           '_ProjectHierarchy': project_oid, 
           "$or": [ 
            {"_TypeHierarchy": "HierarchicalRequirement"}, 
            {"_TypeHierarchy": "Defect"} 
           ], 
           'Children': null 
          }, 
          fetch: ['PlanEstimate','_TypeHierarchy','ObjectID', 'ScheduleState', '_ValidFrom', '_ValidTo', '_PreviousValues'], 
          hydrate: ['ScheduleState', '_TypeHierarchy'], 
          sort: { '_ValidFrom': 1 } 
         , 
         /*find: { 
          '_ProjectHierarchy': project_oid, 
          "_TypeHierarchy": { 
           "$in": ['HierarchicalRequirement', 'Defect'] 
          }, 
          'Children': null 
         }, 
         fetch: ['PlanEstimate','_TypeHierarchy','ObjectID', 'ScheduleState', '_ValidFrom', '_ValidTo', '_PreviousValues'], 
         hydrate: ['ScheduleState', '_TypeHierarchy'], 
         sort: { '_ValidFrom': 1 }*/ 
        }, 
        calculatorType: 'CycleCalculator', 
        chartColors: [ "#6AB17D", "#F47168", "#000000"], 
        calculatorConfig: { 
         startDate: Rally.util.DateTime.format(new Date(this._startDate), 'Y-m-d'), 
         endDate: Rally.util.DateTime.format(new Date(this._endDate), 'Y-m-d'), 
         startState: this._startState, 
         endState: this._endState 
         //granularity: 'week' 
        }, 
        chartConfig: { 
         chart: { 
          type: 'line', 
         }, 
         title: { text: 'Cycle/Lead Time' }, 
         border: 1, 
         plotOptions: { 
          series: {      
           connectNulls: true, 
           marker: { 
            enabled:false 
           } 
          } 
         }, 
         xAxis: { 
          //tickmarkPlacement: 'on', 
          tickInterval: 10, 
          title: { 
           text: 'Months' 
          } 
         }, 
         yAxis: [ 
          { 
           title: { 
            text: 'Average Days' 
           } 
          } 
         ]   
        }, 
        listeners: { 
         snapshotsAggregated: this.showStats, 
         scope: this 
        }      
       } 
      }, 

은 ,,,, 사전에 help..thanks 내가 차트 개체를 사용하려면 내가 를 호출 할 기능과 showStats에() 함수하시기 바랍니다있다

  showStats: function(chart) { 
       console.log("chart values", chart); 
       var average = Ext.Array.mean(chart.calculator.globalVar); 
       var average = Ext.Number.toFixed(average, 2); 
       var min = Ext.Array.min(chart.calculator.globalVar); 
       var max = Ext.Array.max(chart.calculator.globalVar); 
       var count = Ext.Array.sum(chart.calculator.globalVar); 
       console.log("field value", average, min, max, count); 
       //field.fieldLabel = average; 
       var stdDev = this.standardDeviation(average, chart.calculator.globalVar); 
       var stdDev = Ext.Number.toFixed(stdDev, 2); 
       this.down('#averageId').setText("Average " + average); 
       this.down('#countId').setText("Count " + count); 
       this.down('#minId').setText("Minimum " + min); 
       this.down('#maxId').setText("Maximum " + max); 
       this.down('#stdDevId').setText("Std Deviation " + stdDev);     
      }, 

Answer 1

chartRendered의 선택 맞다. 마지막으로 발사하는 사람입니다.

차트가 완전히 렌더링되기 전에 실행되면 버그이지만 테스트 결과 적절한 타이밍에 실행되는 것처럼 보입니다. globalVar에 저장된 데이터와 그 데이터의 도착 방법을 알지 못합니다. 아마도 문제는 chartRendered 이벤트의 타이밍 이외의 다른 곳에서 발생할 수 있습니다.

이벤트 리스너를 추가하여 this example을 수정하면 시각적으로 console.log가 차트 애니메이션보다 완전히 빠르지 만 시각적으로 차트 데이터가 완전히로드되어 모든 데이터가 완료됩니다. 나는 당신이 사용하는 몇 가지 통계가있는 테이블을 만들어서 확인했다.

Ext.define('Rally.example.BurnCalculator', { 
    extend: 'Rally.data.lookback.calculator.TimeSeriesCalculator', 
    config: { 
     completedScheduleStateNames: ['Accepted'] 
    }, 

    constructor: function(config) { 
     this.initConfig(config); 
     this.callParent(arguments); 
    }, 

    getDerivedFieldsOnInput: function() { 
     var completedScheduleStateNames = this.getCompletedScheduleStateNames(); 
     return [ 
      { 
       "as": "Planned", 
       "f": function(snapshot) { 
        if (snapshot.PlanEstimate) { 
         return snapshot.PlanEstimate; 
        } 

        return 0; 
       } 
      }, 
      { 
       "as": "PlannedCompleted", 
       "f": function(snapshot) { 
        if (_.contains(completedScheduleStateNames, snapshot.ScheduleState) && snapshot.PlanEstimate) { 
         return snapshot.PlanEstimate; 
        } 

        return 0; 
       } 
      } 
     ]; 
    }, 

    getMetrics: function() { 
     return [ 
      { 
       "field": "Planned", 
       "as": "Planned", 
       "display": "line", 
       "f": "sum" 
      }, 
      { 
       "field": "PlannedCompleted", 
       "as": "Completed", 
       "f": "sum", 
       "display": "column" 
      } 
     ]; 
    } 
}); 

var PI_OID = 12483739639; //The ObjectID of the PI on which to burn 

    Ext.define('Rally.example.BurnChart', { 
     extend: 'Rally.app.App', 

     requires: [ 
      'Rally.example.BurnCalculator' 
     ], 

     launch: function() { 
      this.add({ 
       xtype: 'rallychart', 
       storeType: 'Rally.data.lookback.SnapshotStore', 
       storeConfig: this._getStoreConfig(), 
       calculatorType: 'Rally.example.BurnCalculator', 
       calculatorConfig: { 
        completedScheduleStateNames: ['Accepted', 'Released'] 
       }, 
       chartConfig: this._getChartConfig(), 
       listeners:{ 
         chartRendered: this._getStats, 
         scope: this 
        } 
      }); 
     }, 

    /** 
    * Generate the store config to retrieve all snapshots for all leaf child stories of the specified PI 
    */ 
    _getStoreConfig: function() { 
     return { 
      find: { 
       _ItemHierarchy: PI_OID, 
       _TypeHierarchy: 'HierarchicalRequirement', 
       Children: null 
      }, 
      fetch: ['ScheduleState', 'PlanEstimate'], 
      hydrate: ['ScheduleState'], 
      sort: { 
       _ValidFrom: 1 
      }, 
      context: this.getContext().getDataContext(), 
      limit: Infinity 
     }; 
    }, 

    /** 
    * Generate a valid Highcharts configuration object to specify the chart 
    */ 
    _getChartConfig: function() { 
     return { 
      chart: { 
       defaultSeriesType: 'area', 
       zoomType: 'xy' 
      }, 
      title: { 
       text: 'PI Burnup' 
      }, 
      xAxis: { 
       categories: [], 
       tickmarkPlacement: 'on', 
       tickInterval: 5, 
       title: { 
        text: 'Date', 
        margin: 10 
       } 
      }, 
      yAxis: [ 
       { 
        title: { 
         text: 'Points' 
        } 
       } 
      ], 
      tooltip: { 
       formatter: function() { 
        return '' + this.x + '<br />' + this.series.name + ': ' + this.y; 
       } 
      }, 
      plotOptions: { 
       series: { 
        marker: { 
         enabled: false, 
         states: { 
          hover: { 
           enabled: true 
          } 
         } 
        }, 
        groupPadding: 0.01 
       }, 
       column: { 
        stacking: null, 
        shadow: false 
       } 
      } 
     }; 
    }, 
    _getStats:function(chart){ 
     var stats = []; 
     console.log(chart); 
     var series = chart.chartData.series; 
     _.each(series, function(s){ 
      stats.push({ 
       name : s.name, 
       average : Ext.Number.toFixed(Ext.Array.mean(s.data), 2), 
       min  : Ext.Array.min(s.data), 
       max  : Ext.Array.max(s.data), 
       count : Ext.Array.sum(s.data) 
      }); 
     }); 
     this._showStats(stats); 
    }, 

    _showStats: function(stats) { 
     console.log(stats); 
     this.add({ 
      xtype: 'rallygrid', 
      store: Ext.create('Rally.data.custom.Store', { 
       data: stats 
      }), 
      columnCfgs: [ 
       { 
        text: 'Name', 
        dataIndex: 'name' 
       }, 
       { 
        text: 'Average', 
        dataIndex: 'average' 
       }, 
       { 
        text: 'Min', 
        dataIndex: 'min' 
       }, 
       { 
        text: 'Max', 
        dataIndex: 'max' 
       }, 
       { 
        text: 'Count', 
        dataIndex: 'count' 
       } 
      ] 
     }); 
    } 
});