javascript - 使用 Rally 的图表

Question

我正在开发一个自定义 Rally 应用程序。我使用回溯 API 提取数据并使用图表将其绘制成图表。该图表是在检索所有数据之前绘制的。因此，我有一个命令按钮，它将触发图表重新加载或刷新或删除并再次插入。

但是我无法弄清楚如何重新加载/刷新按钮。

我已经看过

1. Refreshing a rallychart

2. Updating a chart with new data in App SDK 2.0

但它们不适用于我的情况。

也欢迎任何使其正常工作的替代方法。

我已附上用于 Rally-app-sdk 的 app.js。请帮忙!

var year = 2013;
var month = "07";
var date = 10;
var hh = "17";
var mm = "08";
var ss = "00";
var dates = [];
var array1 = [];
var arraySWQA = [];

//var a3= [1, 2, 3];
//console.log(a3.length);

var chartConfig;

var date1 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z";
console.log(date1);

var date2 = year + "-" + month + "-" + (date + 10) + "T" + hh + ":" + mm + ":" + ss + "Z";
console.log(date2);


date1 = "2013-06-10T15:48:58Z";



Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    id: 'appid',

    launch: function () {


        //Write app code here
        console.log('hello world');
        for (date = 10; date < 21;) {
            date1 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z";
            var dispdate = month + "-" + date;
            dates.push(dispdate);
            date = date + 1;
            date2 = year + "-" + month + "-" + date + "T" + hh + ":" + mm + ":" + ss + "Z";

            console.log(date1);

            //date1 = "2013-07-16T12:00:58Z";
            //date2 = "2013-07-17T12:00:58Z";
            //getting defect count from Parent project ie. all inclusive of SWQA for orbis
            //-------------------------------------------------------------------------------------------------

            //pasted in last one
            var snapshotStore = Ext.create('Rally.data.lookback.SnapshotStore', {
                context: {
                    workspace: '/workspace/3274954442'
                },
                find: {
                    //_ProjectHierarchy: 12280411247, 
                    //__At: "2013-07-22T17:10:00Z",
                    __ValidFrom: date1,
                    __ValidTo: date2,
                    //FormattedID : 'DE12612', 
                    //__ValidFrom: {$lte: "current"},
                    //__ValidTo:{$gt: "current"},
                    //__At:date1,
                    __TypeHierarchy: 'Defect'
                },
                listeners: {
                    load: function (store, data, success) {
                        //process data
                        var x = snapshotStore.getCount();
                        console.log(x);

                        //setTimeout(_loadChart(), 3000)
                    }
                },
                fetch: ['Name', 'State', 'FormattedID', 'OpenedDate'],
                order: 'OpenedDate DESC',
                hydrate: ['State', 'FormattedID'],
                filters: [

                {
                    property: '_TypeHierarchy',
                    operator: '=',
                    value: 'Defect'
                }, {
                    property: '_ProjectHierarchy',
                    operator: '=',
                    value: 10883100246 //orbis 12280416678 //  regicam que      9114502819: regicam exdg
                }, {
                    property: 'OpenedDate',
                    operator: '>',
                    value: date1
                }, {
                    property: 'OpenedDate',
                    operator: '<=',
                    value: date2
                }
                ]
            });



            snapshotStore.load({
                callback: function (records, operation) {
                    if (operation.wasSuccessful()) {
                        //process records

                        var listofdefects = [];
                        for (var i = 0; i < records.length; i++) {
                            //console.log(records[i].data.ObjectID);
                            var found = listofdefects.indexOf(records[i].data.ObjectID);
                            if (found == -1) {
                                listofdefects.push(records[i].data.ObjectID);
                            }
                        }
                        console.log("date = " + date1 + "original: " + records.length + " unique" + listofdefects.length);
                        array1.push(listofdefects.length);
                        console.log("list: " + listofdefects);
                        console.log("All Orbis:" + array1);

                    }


                }
            });

            //getting defect count from Parent project ie. SWQA only for orbis
            var snapshotStoreSWQA = Ext.create('Rally.data.lookback.SnapshotStore', {
                context: {
                    workspace: '/workspace/3274954442'
                },
                find: {
                    //_ProjectHierarchy: 12280411247, 
                    //__At: "2013-07-22T17:10:00Z",
                    __ValidFrom: date1,
                    __ValidTo: date2,
                    //FormattedID : 'DE12612', 
                    //__ValidFrom: {$lte: "current"},
                    //__ValidTo:{$gt: "current"},
                    //__At:date1,
                    __TypeHierarchy: 'Defect'
                },

                listeners: {
                    load: function (store, data, success) {
                        //process data
                        var x = snapshotStoreSWQA.getCount();
                        console.log(x);

                        //setTimeout(_loadChart(), 3000)
                    }
                },
                fetch: ['Name', 'State', 'FormattedID', 'OpenedDate'],
                order: 'OpenedDate DESC',
                hydrate: ['State', 'FormattedID'],
                filters: [

                {
                    property: '_TypeHierarchy',
                    operator: '=',
                    value: 'Defect'
                }, {
                    property: '_ProjectHierarchy',
                    operator: 'in',
                    value: [12226454553, 12829981291, 12226458054, 12280417123, 12226539592] // 10883100246 //orbis 12280416678 //  regicam que      9114502819: regicam exdg
                }, {
                    property: 'OpenedDate',
                    operator: '>',
                    value: date1
                }, {
                    property: 'OpenedDate',
                    operator: '<=',
                    value: date2
                }

                ]
            });



            snapshotStoreSWQA.load({
                callback: function (records, operation) {
                    if (operation.wasSuccessful()) {
                        //process records

                        var listofdefects = [];
                        for (var i = 0; i < records.length; i++) {
                            //console.log(records[i].data.ObjectID);
                            var found = listofdefects.indexOf(records[i].data.ObjectID);
                            if (found == -1) {
                                listofdefects.push(records[i].data.ObjectID);
                            }
                        }
                        console.log("date = " + date1 + "original: " + records.length + " unique" + listofdefects.length);
                        arraySWQA.push(listofdefects.length);
                        console.log("list: " + listofdefects);
                        console.log("SWQA:" + arraySWQA);


                    }


                }
            });
        } //endfor


        this._loadChart();
        this.redrawChart();

    },
     redrawChart: function() { 
        this.remove('chart'); 
        console.log('redrawing');
        this.add(chart); 
    },
    _loadChart: function () {
        chartConfig = {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Defect Kill Rate'
            },
            subtitle: {
                text: 'From Date1 to Date2'
            },
            xAxis: {
                categories: dates
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Defect count (no)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'SWQA defects',
                data: arraySWQA

            }, {
                name: 'Orbis Defects',
                data: array1

            }]
        };

        chart = {
            xtype: 'rallychart',
            height: 300,
            width: 400,
            id: 'chart1',
            chartConfig: chartConfig
        };

        button = {
            xtype: 'rallybutton',
            text: 'Click me',
            handler: function () {
                //Ext.Msg.alert('Button', 'You clicked me');
                console.clear();
                console.log("SWQA:" + arraySWQA);
                console.log("ORBIS Rest:" + array1);


                var a = Ext.getCmp('appid');
                //a.remove(chart);
                //a.add(chart);
                //a.redrawChart();
                console.log('callback');

                Ext.create('Rally.ui.chart.Chart', {
                chartConfig: {
                    chart: {
                        zoomType: "xy"
                    },
                    xAxis: {
                        title: {
                            text: "Date"
                        }
                    },
                    yAxis: [
                        {
                            title: {
                                text: "Points"
                            }
                        }
                    ],
                    plotOptions: {
                        line: {
                            color: "#000"
                        },
                        column: {
                            stacking: null,
                            color: "#6AB17D",
                            lineColor: "#666666",
                            lineWidth: 1,
                            marker: {
                                lineWidth: 1,
                                lineColor: "#666666"
                            },
                            shadow: false
                        }
                    },
                     series: [{
                            name: 'SWQA defects',
                            data: arraySWQA

                        }, {
                            name: 'Orbis Defects',
                            data: array1

                        }]
                }
                //remaining configuration omitted for brevity
            });






            },
            callback: function(){

            }
        };


        this.add(button);
        this.add(chart);



    }
});

Answer 1

您可能会看到一个完整的代码示例，该应用程序根据发布下拉列表 here 中的选择使用新数据更新图表。 。在该代码中，我检查图表是否存在，如果存在则将其删除，然后再重新创建它:

if (this.down('#myChart')) {
    this.remove('myChart');
}
 this.add(
                    {
                        xtype: 'rallychart',
                        height: 400,
                        itemId: 'myChart',
                        chartConfig: {
                            //....
                        },            
                        chartData: {
                            categories: scheduleStateGroups, 
                            series: [ 
                                {   
                                    //...
                                }
                            ]
                        }
                    }
                );
                this.down('#myChart')._unmask();  //otherwise loading mask does not go away