Question

想要在加载图表时调用函数，在侦听器中写入该函数，但在显示图表之前调用它，任何想法我应该监听chartRendered或任何其他事件

            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
                    }                       
                }
            },

在我要调用的函数下面并且在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事件的时间之外的其他地方。

当我通过添加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'
                }
            ]
        });
    }
});

enter image description here

想要在图表加载拉力赛时调用函数

1 个答案: